Dynamic Dropdowns

Based on Another Dropdown

Join the Discussion

Questions? Comments?

More of This Feature

Three Dropdowns

How do you go about creating two dropdown boxes such that when you select a value from the first one, the second is populated with values that depend on the first? Well here's an example.



The example form is coded as follows:

<form name="myform"><div align="center">
<select name="optone" size="1"
continued from previous line[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">
<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


The onchange function on the first dropdown box calls a javascript function called setOptions and passes it the value of the option selected in the first dropdown box. I've given the options values of 1, 2, and 3 but you can use whatever values you like and include as many options as you like.

The javascript function needs to be included in the head section of your page in order for it to work. Here is the example code:

function setOptions(chosen) {
var selbox = document.myform.opttwo;
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option(
'Please select one of the options above first',' ');
if (chosen == "
1") {
  selbox.options[selbox.options.length] = new
'first choice - option one','oneone');
  selbox.options[selbox.options.length] = new
Option('first choice - option two','onetwo');
if (chosen == "2") {
  selbox.options[selbox.options.length] = new
Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new
Option('second choice - option two','twotwo');
if (chosen == "3") {
  selbox.options[selbox.options.length] = new
Option('third choice - option one','threeone');
  selbox.options[selbox.options.length] = new
Option('third choice - option two','threetwo');

All that you need to do to get this function to populate the second dropdown box with your desired values for each of the values in your first dropdown box is to repeat the if statement checking which entry was chosen for all of the different values that can be selected in your first dropdown box. Within each of these you have one selbox.options assignment statement for each value that you want to appear in the second dropdown box (I have included two options in each built you can have as many as you like). The first entry in the option field on the right is the literal that you want to appear as a selectable value in the dropdown box and the second entry is the value that you want to assign to the particular selection.

I have included a button at the end of the form that when clicked will display the value assigned by the second dropdown box just so you can see which value it is set to with the various combinations of selections in the two dropdown boxes. You don't need to include the button in your form but the code does show you how to test the value of the second dropdown box.

You can call your form whatever you want, just substitute its name wherever you see myform in the above example. Similarly you can change the names of the first and second dropdown boxes to whatever you like by substituting for optone and opttwo everywhere they appear.

Note that this page is copied from the "Ask Felgall" website with the permission of the copyright owner.

It is of course reasonably easy to modify this code to handle three or more linked dropdowns.