Three Dynamic Dropdowns

Sample and HTML

Join the Discussion

Questions? Comments?

More of This Feature

Two Dropdowns Update Script

Having produced code to show people how to link two dropdown lists together so that the second list content is determined by what is selected in the first, of course A lot of people then raised the question of how to go about linking three such dropdown lists so that not only is the second list dependent on what is selected in the first list but the third list is dependent on what is selected in the first two. Actually the extension of the code from two lists to three is not quite obvious from looking at the code for linking two lists together and so requesting how to link three lists together is quite a reasonable one. The extension from three to four or fifty dropdowns is obvious from the way that the two dropdown code is extended to handle three dropdowns and so no matter how many dropdowns you want to link you should be able to figure out from this discussion exactly how to go about linking together as many dropdown lists as you need. Personally I think that unless you are intending to use Ajax to retrieve the content for the lower level dropdown lists then linking three together with no more than five options in each will lead to a quite large enough chunk of Javascript that to add more would seriously slow the loading of the page.

Here's an example form with three choices in the first dropdown and two for each of those choices in the second (ie six choices in total) and then a further two choices for each of those in the third dropdown (for a total of 12 possible selections overall).




Let's start by looking at how we have modified the version of the form with two dropdowns to accomodate the third.

<form name="myform"><div align="center">
<select name="optone" size="1"
continued from previous line[document.myform.optone.selectedIndex].value,
continued from previous linedocument.myform.opttwo
<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"
continued from previous line[document.myform.opttwo.selectedIndex].value,
continued from previous linedocument.myform.optthree);">

<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>

<input type="button" name="go" value="Value Selected"
continued from previous line[document.myform.opttwo.selectedIndex].value);">


As you can see apart from adding the onchange event handler to the second dropdown and of course adding the third dropdown, the only other change is to add a second parameter to the function that we are calling to identify which of the dropdown lists we want to update.

Now all we need to do is look at how to amend the Javascript to handle three or more dropdown lists instead of two.