Hiding Values in Successive Pulldowns......

[vanacoro]

I have a piece of javascript that removes a value in pulldown #2 after it's been selected in pulldown #1. Here it is:

<script language="javascript1.2" type="text/javascript">
<!-- Begin
var OptLstTxt = new Array;
var OptLstVal = new Array;
var OptLen = 0;
function NoDuplD(SelObjFrom, SelObjTo) {
var OldToVal = SelObjTo.options[SelObjTo.selectedIndex].value;
if (OptLen == 0) {
OptLen = SelObjFrom.length;
for (var i = 1; i < OptLen; i++) {
OptLstTxt[i] = SelObjFrom.options[i].text;
OptLstVal[i] = SelObjFrom.options[i].value;
}
}
var j = 1;
for (var i = 1; i < OptLen; i++) {
if (OptLstVal[i] != SelObjFrom.options[SelObjFrom.selectedIndex].value) {
if (j == SelObjTo.length) {
SelObjTo.options[j] = new Option(OptLstTxt[i]);
}
else {
SelObjTo.options[j].text = OptLstTxt[i];
}
SelObjTo.options[j].value = OptLstVal[i];
if (OptLstVal[i] == OldToVal) {
SelObjTo.selectedIndex = j;
}
j++;
}
}
if (SelObjTo.length > j)
SelObjTo.options[(SelObjTo.length - 1)] = null;
}
// End -->
</script>

Here are the pulldown boxes:

<table border=2 width=400px align=center class="tn">
<tr>
<td bgcolor="#FFE080" width=185px><select name="domfirstchoice" onChange="NoDuplD(this,document.qa.domsecondchoice)" style="color:#000000; font-family: verdana, arial, sans-serif ; font-weight: 700; font-size: 11px; background-color:#FFE080;">
<option value="">Select a Resort
<option value="Alyeska">Alyeska
<option value="Aspen/Snowmass">Aspen/Snowmass
<option value="Alta">Alta
<option value="Arapahoe Basin">Arapahoe Basin
<option value="Big Sky">Big Sky
<option value="Breckenridge">Breckenridge
<option value="Brighton">Brighton
<option value="Bridger Bowl">Bridger Bowl
<option value="Copper Mountain">Copper Mountain
<option value="Crested Butte">Crested Butte
<option value="Deer Valley">Deer Valley
<option value="Durango\Purgatory">Durango\Purgatory
<option value="Jackson Hole\Grand Targhee">Jackson Hole\Grand Targhee
<option value="Keystone">Keystone
<option value="Lake Tahoe">Lake Tahoe
<option value="Mamouth">Mamouth
<option value="Park City">Park City
<option value="Snowbird">Snowbird
<option value="Solitude">Solitude
<option value="Steamboat">Steamboat
<option value="Sundance">Sundance
<option value="Sun Valley">Sun Valley
<option value="Taos">Taos
<option value="Telluride">Telluride
<option value="The Big Mountain">The Big Mountain
<option value="The Canyons">The Canyons
<option value="Vail\Beaver Creek">Vail\Beaver Creek
<option value="Winter Park">Winter Park
<option value="Wolf Creek">Wolf Creek
</select></td>
<td class=dom>Domestic 1st Choice</td>
</tr>

<tr>
<td bgcolor="#FFE080"><select name="domsecondchoice" onChange="NoDuplD(this,document.qa.domfirstchoice)" style="color:#000000; font-family: verdana, arial, sans-serif ; font-weight: 700; font-size: 11px; background-color:#FFE080;">
<option value="">Select a Resort
<option value="Alyeska">Alyeska
<option value="Aspen/Snowmass">Aspen/Snowmass
<option value="Alta">Alta
<option value="Arapahoe Basin">Arapahoe Basin
<option value="Big Sky">Big Sky
<option value="Breckenridge">Breckenridge
<option value="Brighton">Brighton
<option value="Bridger Bowl">Bridger Bowl
<option value="Copper Mountain">Copper Mountain
<option value="Crested Butte">Crested Butte
<option value="Deer Valley">Deer Valley
<option value="Durango\Purgatory">Durango\Purgatory
<option value="Jackson Hole\Grand Targhee">Jackson Hole\Grand Targhee
<option value="Keystone">Keystone
<option value="Lake Tahoe">Lake Tahoe
<option value="Mamouth">Mamouth
<option value="Park City">Park City
<option value="Snowbird">Snowbird
<option value="Solitude">Solitude
<option value="Steamboat">Steamboat
<option value="Sundance">Sundance
<option value="Sun Valley">Sun Valley
<option value="Taos">Taos
<option value="Telluride">Telluride
<option value="The Big Mountain">The Big Mountain
<option value="The Canyons">The Canyons
<option value="Vail\Beaver Creek">Vail\Beaver Creek
<option value="Winter Park">Winter Park
<option value="Wolf Creek">Wolf Creek
</select></td>
<td class=dom>Domestic 2nd Choice</td>
</tr>

<tr>
<td bgcolor="#FFE080"><select name="domthirdchoice" style="color:#000000; font-family: verdana, arial, sans-serif ; font-weight: 700; font-size: 11px; background-color:#FFE080;">
<option value="">Select a Resort
<option value="Alyeska">Alyeska
<option value="Aspen/Snowmass">Aspen/Snowmass
<option value="Alta">Alta
<option value="Arapahoe Basin">Arapahoe Basin
<option value="Big Sky">Big Sky
<option value="Breckenridge">Breckenridge
<option value="Brighton">Brighton
<option value="Bridger Bowl">Bridger Bowl
<option value="Copper Mountain">Copper Mountain
<option value="Crested Butte">Crested Butte
<option value="Deer Valley">Deer Valley
<option value="Durango\Purgatory">Durango\Purgatory
<option value="Jackson Hole\Grand Targhee">Jackson Hole\Grand Targhee
<option value="Keystone">Keystone
<option value="Lake Tahoe">Lake Tahoe
<option value="Mamouth">Mamouth
<option value="Park City">Park City
<option value="Snowbird">Snowbird
<option value="Solitude">Solitude
<option value="Steamboat">Steamboat
<option value="Sundance">Sundance
<option value="Sun Valley">Sun Valley
<option value="Taos">Taos
<option value="Telluride">Telluride
<option value="The Big Mountain">The Big Mountain
<option value="The Canyons">The Canyons
<option value="Vail\Beaver Creek">Vail\Beaver Creek
<option value="Winter Park">Winter Park
<option value="Wolf Creek">Wolf Creek
</select></td>
<td class=dom>Domestic 3rd Choice</td>
</tr>
</table>

What I really need is for the .js to work for THREE pulldown boxes. I need the second pulldown box to NOT have the value selected in the first pulldown box. I also need the third pulldown box NOT to have the values selected in the first AND second pulldown boxes.

AND TO BE VERY CLEAR, I NEED THE VALUE SELECTED IN THE PULLDOWN BOX TO REMAIN ON THE SCREEN, IN THE PULLDOWN BOX IT WAS SELECTED IN.


Thanks for any help you can provide.

TK Vanacoro

[vwphillips]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// Form Compendium f1 (15-04-2005)
// No Duplicate Selects
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Prevent a selected option text or value being selected in another select box

// Application Notes
// The required select boxes must be allocted a title name of 'f1_NoDuplicates'
// e.g. <select title="f1_NoDuplicates" name="Color_2" >

// The utility is initialised by a <body> onload event
// e.g. <body onload="f1_InitNoDupliates();">

// Comment the indicated lines of code for text or value
// currently set to evaluate text duplicates


var f1_sels,f1_Opt;
var f1_SelAry=new Array();
var f1_NoAry=new Array();

function f1_InitNoDupliates(){
f1_sels=document.getElementsByTagName('SELECT');
for (f1_1=0;f1_1<f1_sels.length;f1_1++){
if (f1_sels[f1_1].title=='f1_NoDuplicates'){
f1_sels[f1_1].onchange=function(){ CheckforDupliates(this); }
f1_SelAry[f1_SelAry.length]=new Array();
f1_SelAry[f1_SelAry.length-1][0]=f1_sels[f1_1];
for (f1_2=0;f1_2<f1_sels[f1_1].options.length;f1_2++){
f1_SelAry[f1_SelAry.length-1][f1_2+3]=new Array();
f1_SelAry[f1_SelAry.length-1][f1_2+3][0]=f1_sels[f1_1].options[f1_2].text;
f1_SelAry[f1_SelAry.length-1][f1_2+3][1]=f1_sels[f1_1].options[f1_2].value;
}
}
}
}

function CheckforDupliates(obj){
for (f1_3=0;f1_3<f1_SelAry.length;f1_3++){
if (f1_SelAry[f1_3][0]==obj){
f1_SelAry[f1_3][1]=obj.options[obj.selectedIndex].text; // text duplicates
// f1_SelAry[f1_3][1]=obj.options[obj.selectedIndex].value; // value duplicates
}
}
f1_NoAry=new Array();
for (f1_1=0;f1_1<f1_SelAry.length;f1_1++){
if (f1_SelAry[f1_1][1]){
f1_NoAry[f1_NoAry.length]=f1_SelAry[f1_1][1];
}
}
for (f1_4=0;f1_4<f1_SelAry.length;f1_4++){
f1_Opt=0;
if (f1_SelAry[f1_4][0]!=obj){
f1_SelAry[f1_4][0].options.length=0;
}
for (f1_5=3;f1_5<f1_SelAry[f1_4].length;f1_5++){
f1_SelAry[f1_4][2]=1;
for (f1_2=0;f1_2<f1_NoAry.length;f1_2++){
if (f1_SelAry[f1_4][f1_5][0]==f1_NoAry[f1_2]&&f1_SelAry[f1_4][1]!=f1_NoAry[f1_2]){ // text duplicates
// if (f1_SelAry[f1_4][f1_5][1]==f1_NoAry[f1_2]&&f1_SelAry[f1_4][1]!=f1_NoAry[f1_2]){ // value duplicates
f1_SelAry[f1_4][2]=0;
}
}
if (f1_SelAry[f1_4][0]!=obj&&f1_SelAry[f1_4][2]){
f1_SelAry[f1_4][0].options[f1_Opt]=new Option(f1_SelAry[f1_4][f1_5][0],f1_SelAry[f1_4][f1_5][1],true,true);
f1_Opt++;
}
}
if (f1_SelAry[f1_4][0]!=obj){
f1_SelAry[f1_4][0].selectedIndex=0;
}
for (f1_6=0;f1_6<f1_SelAry[f1_4][0].options.length;f1_6++){
if (f1_SelAry[f1_4][1]==f1_SelAry[f1_4][0].options[f1_6].text){ // text duplicates
// if (f1_SelAry[f1_4][1]==f1_SelAry[f1_4][0].options[f1_6].value){ // value duplicates
f1_SelAry[f1_4][0].selectedIndex=f1_6;
}
}
}
}


//-->
</script>

</head>

<body onload="f1_InitNoDupliates();">


Try to select the same color:
<br>
<select title="f1_NoDuplicates" name="Color_1">
<option selected value=''>Select your first prefered color</option>
<option value='R'>Red</option>
<option value='J'>Yellow</option>
<option value='G'>Green</option>
<option value='B'>Blue</option>
</select>

<select title="f1_NoDuplicates" name="Color_2" >
<option selected value=''>Select Second Prefered color</option>
<option value='R'>Red</option>
<option value='J'>Yellow</option>
<option value='G'>Green</option>
<option value='B'>Blue</option>
</select>


<select title="f1_NoDuplicates" name="Color_3" >
<option selected value=''>Select Third Prefered color</option>
<option value='R'>Red</option>
<option value='J'>Yellow</option>
<option value='G'>Green</option>
<option value='B'>Blue</option>
</select>

</body>

</html>



or see for a more flexiable version

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm

[vanacoro]

Wow, that looks great.

I have two questions:

1. Using MY pulldown boxes, which have more and wider-named choices, when I select the longest name, the other two boxes SHORTEN.......I have re-done with width of the pulldown boxes, but that does not seem to be the issue. Do you think it might be your code ?

2. title="f1_NoDuplicates" name="Color_3. Where is the name Color referenced in your code ? Is it still necessary ?

Thank you for your help and following up. I appreciate it very much. When we get this figures, I know I have one more ? about the code which is replicating it as I have ANOTHER, DIFFERENT set of three pulldown boxes with completely different values.

TK Vanacoro :thumbsup: :thumbsup: :thumbsup:

[vwphillips]

crossed posts

see my edits

will now look at your comments

[vwphillips]

suggest trying giving selectboxes a style="width:100px;" to seciffy the required width

my code does not rely on name or id but the title , now the parent node title after update, so interfers with very little.

I will be optomising the new code(on my site) later (in case some well meaning soul tells me it could be 'better' or different) but it has been tested.

there can be as many applications with any number or selects anwhere on the page and jumpled up if reqd

[vanacoro]

The width was well over the 'px' needed for the information in the pulldown boxes and worked prior to installing your javascript. I forward you the actual work, in case there is something for you to look at in there.

Thanks again. You do good work.

TK Vanacoro

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>

<LINK REL=StyleSheet HREF="http://www.totwsc.org/survey.css" TYPE="text/css" TITLE="24-bit Color Style">

<script language="JavaScript" type="text/javascript">
<!--
// Form Compendium f1 (15-04-2005)
// No Duplicate Selects
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Prevent a selected option text or value being selected in another select box

// Application Notes
// The required select boxes must be allocted a title name of 'f1_NoDuplicates'
// e.g. <select title="f1_NoDuplicates" name="Color_2" >

// The utility is initialised by a <body> onload event
// e.g. <body onload="f1_InitNoDupliates();">

// Comment the indicated lines of code for text or value
// currently set to evaluate text duplicates


var f1_sels,f1_Opt;
var f1_SelAry=new Array();
var f1_NoAry=new Array();

function f1_InitNoDuplicates(){
f1_sels=document.getElementsByTagName('SELECT');
for (f1_1=0;f1_1<f1_sels.length;f1_1++){
if (f1_sels[f1_1].title=='f1_NoDuplicates'){
f1_sels[f1_1].onchange=function(){ CheckforDuplicates(this); }
f1_SelAry[f1_SelAry.length]=new Array();
f1_SelAry[f1_SelAry.length-1][0]=f1_sels[f1_1];
for (f1_2=0;f1_2<f1_sels[f1_1].options.length;f1_2++){
f1_SelAry[f1_SelAry.length-1][f1_2+3]=new Array();
f1_SelAry[f1_SelAry.length-1][f1_2+3][0]=f1_sels[f1_1].options[f1_2].text;
f1_SelAry[f1_SelAry.length-1][f1_2+3][1]=f1_sels[f1_1].options[f1_2].value;
}
}
}
}

function CheckforDuplicates(obj){
for (f1_3=0;f1_3<f1_SelAry.length;f1_3++){
if (f1_SelAry[f1_3][0]==obj){
f1_SelAry[f1_3][1]=obj.options[obj.selectedIndex].text; // text duplicates
// f1_SelAry[f1_3][1]=obj.options[obj.selectedIndex].value; // value duplicates
}
}
f1_NoAry=new Array();
for (f1_1=0;f1_1<f1_SelAry.length;f1_1++){
if (f1_SelAry[f1_1][1]){
f1_NoAry[f1_NoAry.length]=f1_SelAry[f1_1][1];
}
}
for (f1_4=0;f1_4<f1_SelAry.length;f1_4++){
f1_Opt=0;
if (f1_SelAry[f1_4][0]!=obj){
f1_SelAry[f1_4][0].options.length=0;
}
for (f1_5=3;f1_5<f1_SelAry[f1_4].length;f1_5++){
f1_SelAry[f1_4][2]=1;
for (f1_2=0;f1_2<f1_NoAry.length;f1_2++){
if (f1_SelAry[f1_4][f1_5][0]==f1_NoAry[f1_2]&&f1_SelAry[f1_4][1]!=f1_NoAry[f1_2]){ // text duplicates
// if (f1_SelAry[f1_4][f1_5][1]==f1_NoAry[f1_2]&&f1_SelAry[f1_4][1]!=f1_NoAry[f1_2]){ // value duplicates
f1_SelAry[f1_4][2]=0;
}
}
if (f1_SelAry[f1_4][0]!=obj&&f1_SelAry[f1_4][2]){
f1_SelAry[f1_4][0].options[f1_Opt]=new Option(f1_SelAry[f1_4][f1_5][0],f1_SelAry[f1_4][f1_5][1],true,true);
f1_Opt++;
}
}
if (f1_SelAry[f1_4][0]!=obj){
f1_SelAry[f1_4][0].selectedIndex=0;
}
for (f1_6=0;f1_6<f1_SelAry[f1_4][0].options.length;f1_6++){
if (f1_SelAry[f1_4][1]==f1_SelAry[f1_4][0].options[f1_6].text){ // text duplicates
// if (f1_SelAry[f1_4][1]==f1_SelAry[f1_4][0].options[f1_6].value){ // value duplicates
f1_SelAry[f1_4][0].selectedIndex=f1_6;
}
}
}
}


//-->
</script>


</head>

<body onload="f1_InitNoDuplicates();">

<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>

<table border=2 width=550px align=center class="tn">
<tr>
<td bgcolor="#FFE080" width=250px><select title="f1_NoDuplicates" name="domfirstchoice" style="color:#000000; font-family: verdana, arial, sans-serif ; font-weight: 700; font-size: 11px; background-color:#FFE080;">
<option value="">Select a Resort
<option value="Alyeska">Alyeska
<option value="Aspen\Snowmass">Aspen\Snowmass
<option value="Alta">Alta
<option value="Arapahoe Basin">Arapahoe Basin
<option value="Big Sky">Big Sky
<option value="Breckenridge">Breckenridge
<option value="Brighton">Brighton
<option value="Bridger Bowl">Bridger Bowl
<option value="Copper Mountain">Copper Mountain
<option value="Crested Butte">Crested Butte
<option value="Deer Valley">Deer Valley
<option value="Durango\Purgatory">Durango\Purgatory
<option value="Jackson Hole\Grand Targhee">Jackson Hole\Grand Targhee
<option value="Keystone">Keystone
<option value="Lake Tahoe">Lake Tahoe
<option value="Mamouth">Mamouth
<option value="Park City">Park City
<option value="Snowbird">Snowbird
<option value="Solitude">Solitude
<option value="Steamboat">Steamboat
<option value="Sundance">Sundance
<option value="Sun Valley">Sun Valley
<option value="Taos">Taos
<option value="Telluride">Telluride
<option value="The Big Mountain">The Big Mountain
<option value="The Canyons">The Canyons
<option value="Vail\Beaver Creek">Vail\Beaver Creek
<option value="Winter Park">Winter Park
<option value="Wolf Creek">Wolf Creek
</select></td>
<td class=dom width=200px>Domestic 1st Choice</td>
</tr>



<td bgcolor="#FFE080" width=250px><select title="f1_NoDuplicates" name="domsecondchoice" style="color:#000000; font-family: verdana, arial, sans-serif ; font-weight: 700; font-size: 11px; background-color:#FFE080;">
<option value="">Select a Resort
<option value="Alyeska">Alyeska
<option value="Aspen\Snowmass">Aspen\Snowmass
<option value="Alta">Alta
<option value="Arapahoe Basin">Arapahoe Basin
<option value="Big Sky">Big Sky
<option value="Breckenridge">Breckenridge
<option value="Brighton">Brighton
<option value="Bridger Bowl">Bridger Bowl
<option value="Copper Mountain">Copper Mountain
<option value="Crested Butte">Crested Butte
<option value="Deer Valley">Deer Valley
<option value="Durango\Purgatory">Durango\Purgatory
<option value="Jackson Hole\Grand Targhee">Jackson Hole\Grand Targhee
<option value="Keystone">Keystone
<option value="Lake Tahoe">Lake Tahoe
<option value="Mamouth">Mamouth
<option value="Park City">Park City
<option value="Snowbird">Snowbird
<option value="Solitude">Solitude
<option value="Steamboat">Steamboat
<option value="Sundance">Sundance
<option value="Sun Valley">Sun Valley
<option value="Taos">Taos
<option value="Telluride">Telluride
<option value="The Big Mountain">The Big Mountain
<option value="The Canyons">The Canyons
<option value="Vail\Beaver Creek">Vail\Beaver Creek
<option value="Winter Park">Winter Park
<option value="Wolf Creek">Wolf Creek
</select></td>
<td class=dom width=200px>Domestic 2nd Choice</td>
</tr>


<td bgcolor="#FFE080" width=250px><select title="f1_NoDuplicates" name="domthirdchoice" style="color:#000000; font-family: verdana, arial, sans-serif ; font-weight: 700; font-size: 11px; background-color:#FFE080;">
<option value="">Select a Resort
<option value="Alyeska">Alyeska
<option value="Aspen\Snowmass">Aspen\Snowmass
<option value="Alta">Alta
<option value="Arapahoe Basin">Arapahoe Basin
<option value="Big Sky">Big Sky
<option value="Breckenridge">Breckenridge
<option value="Brighton">Brighton
<option value="Bridger Bowl">Bridger Bowl
<option value="Copper Mountain">Copper Mountain
<option value="Crested Butte">Crested Butte
<option value="Deer Valley">Deer Valley
<option value="Durango\Purgatory">Durango\Purgatory
<option value="Jackson Hole\Grand Targhee">Jackson Hole\Grand Targhee
<option value="Keystone">Keystone
<option value="Lake Tahoe">Lake Tahoe
<option value="Mamouth">Mamouth
<option value="Park City">Park City
<option value="Snowbird">Snowbird
<option value="Solitude">Solitude
<option value="Steamboat">Steamboat
<option value="Sundance">Sundance
<option value="Sun Valley">Sun Valley
<option value="Taos">Taos
<option value="Telluride">Telluride
<option value="The Big Mountain">The Big Mountain
<option value="The Canyons">The Canyons
<option value="Vail\Beaver Creek">Vail\Beaver Creek
<option value="Winter Park">Winter Park
<option value="Wolf Creek">Wolf Creek
</select></td>
<td class=dom width=200px>Domestic 3rd Choice</td>
</tr>
</table>

</body>
</html>

PS If you check, http://www.totwsc.org/Survey.html
you will see the variable size of the pulldown window was not an issue prior to the new Javascript.



:thumbsup: :cool: :cool: :cool:

[vwphillips]

I suggested putting the width in the selectbox style but it can go in the script with an additional line



.......


function f1_InitNoDuplicates(){
f1_sels=document.getElementsByTagName('SELECT');
for (f1_1=0;f1_1<f1_sels.length;f1_1++){
if (f1_sels[f1_1].title=='f1_NoDuplicates'){
f1_sels[f1_1].onchange=function(){ CheckforDuplicates(this); }
f1_sels[f1_1].style.width=(f1_sels[f1_1].offsetWidth)+'px'; // new line
f1_SelAry[f1_SelAry.length]=new Array();
f1_SelAry[f1_SelAry.length-1][0]=f1_sels[f1_1];
...........



suggest you use the updated code on my site (with this ammendment) though

[vanacoro]

I could not understand the changes to the pulldown boxes as you explained them in your notes in your updated code on your website.

However, I did add the 'px' line to the code I had and all is well. Sorry that I did not understand your notation about adding the PX to the .js. I added it to my table description.

Thank you for your help. I really appreciate it.

TK Vanacoro :thumbsup: :p ;) :cool: :)

[vwphillips]

better in the code anyway

alls well that ends well