Your host:
Stephen Chapman

Stephen Chapman

Computer Help Blog

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.

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"
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 /> <br />
<select name="optthree" size="1">
<option value="*-*" selected="selected">Please select one of the options above first</option>
</select><br /> <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');
}
}

Related Articles

FaceBook Follow

Copyright © Felgall Pty Ltd