Dynamic Dropdown Boxes - Revised

This is an updated version of my dynamic dropdown boxes script. It basically has three things changed from the original script.

With this restructuring means that the function can now be changed to accept three parameters instead of one allowing the one function to be used for all of the different variants of dynamic dropdown processing where the values to display in a dropdown are determined by a value selected via another field. To create multiple dropdowns that work off the same first dropdown simply call setOptions multiple times passing the id of each dropdown to be updated and an array of the entries to display in that dropdown (avoiding the need to add extra code into the function as presented in my original version). Also instead of needing extra code for cascading dropdowns you simply supply extra array entries for each dropdown and set numeric values starting from where the first array left off as the values in the array for the second dropdown that will identify the groups of entries to display in the third dropdown.

Here's a working example of the dynamic dropdown.

Dynamic Dropdown
 

The HTML for this form 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>
<option value="2">Third 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>
<input type="button" id="go" value="Value Selected">
</fieldset></form>

The JavaScript to interact with that form and dynamically populate the second dropdown based on what is selected in the first looks like this (with the selOptions function that doesn't need to be changed shown in bold).

(function() {
var opts = [
         [   ['first choice - option one', 'oneone'],
             ['first choice - option two', 'onetwo']  ],
 
         [   ['A'],
             ['second choice - A option one', 'twoAone'],
             ['second choice - A option two', 'twoAtwo'],
             ['B'],
             ['second choice - option B one', 'twoBone'],
             ['second choice - option B two', 'twoBtwo']  ],
 
         [   ['third choice - option one', 'threeone'],
             ['third choice - option two', 'threetwo']  ]
];
 
document.getElementById('optone').onchange=
     function() {setOptions(document.getElementById('opttwo'), opts,
                 document.getElementById('optone').options[
           document.getElementById('optone').selectedIndex].value);};
document.getElementById('go').onclick=
     function() {alert(document.getElementById('opttwo').options[
          document.getElementById('opttwo').selectedIndex].value);};
 
setOptions = function(selbox, opts, chosen) {
var selbox, i, ii, grp;
selbox.options.length = 0;
while (selbox.firstChild) selbox.removeChild(selbox.firstChild);
if (chosen == " ") {
  selbox.options[selbox.options.length] =
new Option('Please select one of the options above first',' ');
} else {
   for (i=0, ii= opts[chosen].length; i < ii; i++) {
      if (opts[chosen][i].length > 1) {
         selbox.options[selbox.options.length] =
            new Option(opts[chosen][i][0],opts[chosen][i][1]);
      } else {
         grp = document.createElement('optgroup');
         grp.label=opts[chosen][i][0];
         selbox.appendChild(grp);
      }
   }
}
}

 
})();

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate