More Dynamic Dropdown Boxes - Revised

On the page Dynamic Dropdown Boxes - Revised I showed a reasonably unobtrusive way of setting up dynamic dropdowns where the content of the second is dependent on what is selected in the first. I said there that the new version of the function can be used for all of the different variants of the dynamic dropdown lists that I had demonstrated in the earlier obtrusive variants of the script. To make it easier to see how this applies I am going to cover how to extend the code to work with three dropdowns where the third is dependent on the content of the second and also where both the second and third are dependent on the first. We'll start by looking at the more complicated alternative where the third is dependent on the second.

Here's a working example of this dynamic dropdown.

Dynamic Dropdown


The HTML for this form simply adds the extra dropdown using code for the third dropdown similar to that for the second dropdown so it now looks like this:

<form><fieldset><legend>Dynamic Dropdown</legend>
<label for="optone">Option One: </label>
<select id="optone" size="1">
<option value=" " selected="selected"> </option>
<option value="0">First Choice</option>
<option value="1">Second Choice</option>
</select><br/> <br/><label for="opttwo">Option Two: </label>
<select id="opttwo" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select><br/> <br/><label for="optthree">Option Three: </label>
<select id="optthree" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>

<input type="button" id="go" value="Value Selected">

The JavaScript is then updated to allow for the third dropdown. First we update the array containing the entries for the dynamic dropdowns. As the first dropdown uses numbers starting from '0' to identify the entries in the array to use to populate the second dropdown we can simply assign numbers to the values for the options it can add to the second dropdown that continue on from where the numbers in the first dropdown end and use the same array to hold the entries for the third dropdown (and similarly for any subsequent selects that are to work the same way. Since the first select in this example code uses '0' and '1' as its values, we assign '2' and so on for the values that can appear in the second array so that they will refer to array entries that are after those used by the first array.

We also need to add a blank entry to the top of each set of choices for the second select so that it will need to be changed in order to select the entries for the third select (otherwise the change event will not trigger to load the third select if the first value is the one wanted in the second select.

The only other change we need is to replicate the change call from the first select and apply it to the second select. All of the rest of the code remains unchanged from the two select example.

To add a fourth select simply make the same changes again to add that select as you did to add the third select.

(function() {
var opts = [
// entries for second select
            [[' ',' '],
             ['first choice - option one','2'],
             ['first choice - option two','3']],
            [[' ',' '],
             ['second choice - option three','4'],
             ['second choice - option four','5']],
// entries for last select
            [['option one - A','1A'],
             ['option one - B','1B']],
            [['option two - A','2A'],
             ['option two - B','2B']],
            [['option three - A','3A'],
             ['option three - B','3B']],
            [['option four - A','4A'],
             ['option four - B','4B']]
     function() {setOptions(document.getElementById('opttwo'), opts,
     function() {setOptions(document.getElementById('optthree'), opts,

     function() {alert(document.getElementById('optthree').options[
// setOptions function code goes here (unchanged regardless of the number of select lists

Next we'll consider the simpler alternative where instead of having the third select load entries based on the second select, we want both the second and third selects to load based on the first select. Now instead of adding the entries for the third select to the existing array we simply create a second array (opts1) to hold the values for the third select. Also instead of adding change event processing for the second select, we instead simply modify the change event processing for the first select so it updates both of the other selects at the same time.

     function() {setOptions(document.getElementById('opttwo'), opts,
           setOptions(document.getElementById('optthree'), opts1,


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow