hiding dropdown menu

Hi, i am building a website form which I would like the user to select a product of interest. Some products are three tiered and some are two tiered.

If the user wants to submit their interest for one of the products, I need to have at most 3 dropdown menus. So in Example 1, I would have 3 dropdowns in my form. Dropdown 1: Scooters Dropdown 2: Three Wheel Scooters Dropdown 3: Delux 503S Bird Scooter

In Example 2, I would only need to use the first 2 dropdown menus. (Obviously the first dropdown would contain ‘Scooters’ and ‘Standing Bikes’ in the menu list)

The below code is perfect except, I would like to alter the code so that the second and third dropdowns are hidden until a selection from the first drop down is made. Once for example, ‘Standing Bikes’ is selected from the first dropdown menu, the second dropdown menu appears and the third remains hidden due to the fact that it is not required. If I selected Scooters from the first dropdown menu, the second dropdown would appear listing all items associated with this and at this point the third dropdown menu is hidden. If i select ‘Three Wheel Scooter’ from the second dropdown the third dropdown menu now appears listing all Three wheel Scooters such as ‘Delux 503S Bird Scooter’.

I hope this makes sense. Let me know if you require clarrification.

Here is the code:

[CODE]<script language=”JavaScript” type=”text/javascript”>
<!–

// first combo box

data_1 = new Option(“1”, “$”);
data_2 = new Option(“2”, “$$”);

// second combo box

data_1_1 = new Option(“11”, “-“);
data_1_2 = new Option(“12”, “-“);
data_2_1 = new Option(“21”, “–“);
data_2_2 = new Option(“22”, “–“);
data_2_3 = new Option(“23”, “–“);
data_2_4 = new Option(“24”, “–“);
data_2_5 = new Option(“25”, “–“);

// third combo box

data_1_1_1 = new Option(“111”, “*”);
data_1_1_2 = new Option(“112”, “*”);
data_1_1_3 = new Option(“113”, “*”);
data_1_2_1 = new Option(“121”, “*”);
data_1_2_2 = new Option(“122”, “*”);
data_1_2_3 = new Option(“123”, “*”);
data_1_2_4 = new Option(“124”, “*”);
data_2_1_1 = new Option(“211”, “**”);
data_2_1_2 = new Option(“212”, “**”);
data_2_2_1 = new Option(“221”, “**”);
data_2_2_2 = new Option(“222”, “**”);
data_2_3_1 = new Option(“231”, “***”);
data_2_3_2 = new Option(“232”, “***”);

// fourth combo box

data_2_2_1_1 = new Option(“2211″,”%”)
data_2_2_1_2 = new Option(“2212″,”%%”)

// other parameters

displaywhenempty=””
valuewhenempty=-1

displaywhennotempty=”-select-”
valuewhennotempty=0

function change(currentbox) {
numb = currentbox.id.split(“_”);
currentbox = numb[1];

i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

while ((eval(“typeof(document.getElementById(“combo_”+i+””))!=’undefined'”)) &&
(document.getElementById(“combo_”+i)!=null)) {
son = document.getElementById(“combo_”+i);
// I empty all options except the first one (it isn’t allowed)
for (m=son.options.length-1;m>0;m–) son.options[m]=null;
// I reset the first option

son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}

// now I create the string with the “base” name (“stringa”), ie. “data_1_0”
// to which I’ll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

stringa=’data’
i=0
while ((eval(“typeof(document.getElementById(“combo_”+i+””))!=’undefined'”)) &&
(document.getElementById(“combo_”+i)!=null)) {
eval(“stringa=stringa+’_’+document.getElementById(“combo_”+i+””).selectedIndex”)
if (i==currentbox) break;
i=i+1
}

// filling the “son” combo (if exists)

following=parseInt(currentbox)+1

if ((eval(“typeof(document.getElementById(“combo_”+following+””))!=’undefined'”)) &&
(document.getElementById(“combo_”+following)!=null)) {
son = document.getElementById(“combo_”+following);
stringa=stringa+”_”
i=0
while ((eval(“typeof(“+stringa+i+”)!=’undefined'”)) || (i==0)) {

// if there are no options, I empty the first option of the “son” combo
// otherwise I put “-select-” in it

if ((i==0) && eval(“typeof(“+stringa+”0)==’undefined'”))
if (eval(“typeof(“+stringa+”1)==’undefined'”))
eval(“son.options[0]=new Option(displaywhenempty,valuewhenempty)”)
else
eval(“son.options[0]=new Option(displaywhennotempty,valuewhennotempty)”)
else
eval(“son.options[“+i+”]=new Option(“+stringa+i+”.text,”+stringa+i+”.value)”)
i=i+1
}
//son.focus()
i=1
combostatus=”
cstatus=stringa.split(“_”)
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}

//–>
</script>

<form>
<select name=”combo0″ id=”combo_0″ onChange=”change(this);” style=”width:200px;”>
<option value=”value1″>-select-</option>
<option value=”value2″>1</option>
<option value=”value3″>2</option>

</select>
<BR><BR>
<select name=”combo1″ id=”combo_1″ onChange=”change(this)” style=”width:200px;”>
<option value=”value1″> </option>
</select>
<BR><BR>
<select name=”combo2″ id=”combo_2″ onChange=”change(this);” style=”width:200px;”>
<option value=”value1″> </option>
</select>
<BR><BR>
<select name=”combo3″ id=”combo_3″ onChange=”change(this);” style=”width:200px;”>
<option value=”value1″> </option>

</select>

</form>
[/CODE]

Also in #JavaScript _↴