Multiple Dynamic Dropdown Boxes

On my page Dynamic Dropdown Boxes I show you how to dynamically generate the content of a dropdown box based on the entry that has already been selected in another dropdown box. Here I am going to show you how this can be extended to dynamically generate the content of multiple dropdown boxes at the same time based on that first selection. (Note that if instead you use my less obtrusive and more flexible dynamic dropdown script then you simply call setOptions() a second time passing the id of the additional dropdown and a separate array containing its entries.) The following example shows two dropdowns being dynamically loaded but this can easily be extended to include as many as you need.


 


 

The example form is coded as follows:

<form name="myform"><div class="centre">
<select name="optone" size="1"
onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select><br /> <br />
<select name="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select><br />
<select name="optthree" size="1">
<option value=" " selected="selected">
Please select one of the options above first</option>
</select>
<input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value + ':' + document.myform.optthree.options[document.myform.optthree.selectedIndex].value);" />

</div></form>

The only real difference here from the earlier example is that we have coded an additional dropdown box and given it its own name (as shown in bold).

The next step is to modify the javascript to load the values for the extra dropdown box. Again the additions to the script to handle the second dymanic dropdown are shown in bold.

function setOptions(chosen) {
var selbox = document.myform.opttwo;
var selbox2 = document.myform.optthree;
 
selbox.options.length = 0;
selbox2.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] =
new Option('Please select one of the options above first',' ');
selbox2.options[selbox2.options.length] =
new Option('Please select one of the options above first',' ');

}
if (chosen == "1") {
selbox.options[selbox.options.length] =
new Option('first choice - option one','oneone');
selbox.options[selbox.options.length] =
new Option('first choice - option two','onetwo');
selbox2.options[selbox2.options.length] =
new Option('first choice - option one A','oneoneA');
selbox2.options[selbox2.options.length] =
new Option('first choice - option two A','onetwoA');

}
if (chosen == "2") {
selbox.options[selbox.options.length] =
new Option('second choice - option one','twoone');
selbox.options[selbox.options.length] =
new Option('second choice - option two','twotwo');
selbox2.options[selbox2.options.length] =
new Option('second choice - option one A','twooneA');
selbox2.options[selbox2.options.length] =
new Option('second choice - option two A','twotwoA');
selbox2.options[selbox2.options.length] =
new Option('second choice - option three A','twothreeA');

}
if (chosen == "3") {
selbox.options[selbox.options.length] =
new Option('third choice - option one','threeone');
selbox.options[selbox.options.length] =
new Option('third choice - option two','threetwo');
selbox2.options[selbox2.options.length] =
new Option('third choice - option one A','threeoneA');

}
}

Of course if you want the contents of more than two dropdown boxes to be dynamically generated you just repeat the additional code giving the fields yet another unique name.

Note: This page shows how this would have been done for early browsers such as Netscape 4. For a version better designed to work with modern browsers please see my revised cascading dropdown script.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate