Cascading Dynamic Dropdown Boxes

On my page Multiple Dynamic Dropdown Boxes I show you how to dynamically generate the content of two dropdown boxes based on the entry that has already been selected in another dropdown box. Here I am going to show you how this can be altered to dynamically generate the content of the third dropdown boxes based on that selected in the second dropdown instead of the first. (Alternatively if you use my unobtrusive dynamic dropdown then you simply add an extra call to setOptions() specifying the values for that dropdown the same way you did for the prior one - you just need to make sure that the values that the first dropdown loads into the second dropdown correspond to the array positions in the array used to build the third dropdown.)


 

 

 

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 />&nbsp;<br />
<select name="opttwo" size="1"
onchange="setOptions(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
<option value="*" selected="selected">Please select one of the options above first</option>
</select><br />&nbsp;<br />
<select name="optthree" size="1">
<option value="*-*" selected="selected">Please select one of the options above first</option>
</select><br />&nbsp;<br />
<input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.optthree.options[document.myform.optthree.selectedIndex].value);"/>
</div></form>

The only difference here from the earlier example are shown in bold.

The next step is to modify the JavaScript. Again the changes are marked in bold and as you can see there are somewhat more of them to allow the function to handle both levels of the dropdown.

function setOptions(chosen) {
var selbox = document.myform.opttwo;
var selbox2 = document.myform.optthree;
 
selbox2.options.length = 0;
if (chosen == " ") {
  selbox.options.length = 0;
  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.length = 0;
  selbox.options[selbox.options.length] = new Option(' ','*');

  selbox.options[selbox.options.length] =
    new Option('first choice - option one','1-1');
  selbox.options[selbox.options.length] =
    new Option('first choice - option two','1-2');
  selbox2.options[selbox2.options.length] =
    new Option('Please select one of the options above first','*-*');
}
if (chosen == "2") {
  selbox.options.length = 0;
  selbox.options[selbox.options.length] = new Option(' ','*');

  selbox.options[selbox.options.length] =
    new Option('second choice - option one','2-1');
  selbox.options[selbox.options.length] =
    new Option('second choice - option two','2-2');
  selbox2.options[selbox2.options.length] =
    new Option('Please select one of the options above first','*-*');
}
if (chosen == "3") {
  selbox.options.length = 0;
  selbox.options[selbox.options.length] = new Option(' ','*');

  selbox.options[selbox.options.length] =
    new Option('third choice - option one','3-1');
  selbox.options[selbox.options.length] =
    new Option('third choice - option two','3-2');
  selbox2.options[selbox2.options.length] =
    new Option('Please select one of the options above first','*-*');
}
if (chosen == "1-1") {
  selbox2.options[selbox2.options.length] =
    new Option('first choice - option one A','1-1-A');
  selbox2.options[selbox2.options.length] =
    new Option('first choice - option one B','1-1-B');
  selbox2.options[selbox2.options.length] =
    new Option('first choice - option one C','1-1-C');
}
if (chosen == "1-2") {
  selbox2.options[selbox2.options.length] =
    new Option('first choice - option two A','1-2-A');
  selbox2.options[selbox2.options.length] =
    new Option('first choice - option two B','1-2-B');
  selbox2.options[selbox2.options.length] =
    new Option('first choice - option two C','1-2-C');
}
if (chosen == "2-1") {
  selbox2.options[selbox2.options.length] =
    new Option('second choice - option one A','2-1-A');
  selbox2.options[selbox2.options.length] =
    new Option('second choice - option one B','2-1-B');
  selbox2.options[selbox2.options.length] =
    new Option('second choice - option one C','2-1-C');
}
if (chosen == "2-2") {
  selbox2.options[selbox2.options.length] =
    new Option('second choice - option two A','2-2-A');
  selbox2.options[selbox2.options.length] =
    new Option('second choice - option two B','2-2-B');
  selbox2.options[selbox2.options.length] =
    new Option('second choice - option two C','2-2-C');
}
if (chosen == "3-1") {
  selbox2.options[selbox2.options.length] =
    new Option('third choice - option one A','3-1-A');
  selbox2.options[selbox2.options.length] =
    new Option('third choice - option one B','3-1-B');
  selbox2.options[selbox2.options.length] =
    new Option('third choice - option one C','3-1-C');
}
if (chosen == "3-2") {
  selbox2.options[selbox2.options.length] =
    new Option('third choice - option two A','3-2-A');
  selbox2.options[selbox2.options.length] =
    new Option('third choice - option two B','3-2-B');
  selbox2.options[selbox2.options.length] =
    new Option('third choice - option two C','3-2-C');
}

}

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