Ordered Dropdowns

4. Add to Your Page

All that remains to be done now is to add the necessary form fields into your web page and attach the Javascript to it.

Exactly what you put into the form will depend on what other information that the form is to collect so we'll just look at the part of the code that is needed to produce our ordered dropdowns.

The simplest way to set up the HTML for the dropdown lists is to create one drop down list and then copy and paste it to produce as many identical dropdowns as you need. The only requirement for the script to work is that a higher level element containing all of the dropdown lists have an id assigned to it and that the id be passed as the second parameter into our Javascript function. This container can be the form itself if all of the dropdowns in the form are to be included in this processing or we can use a div around these dropdowns if there are other dropdown lists in the form that are not part of this multiple ordered selection.

To enable us to determine easily whether an entry has been selected in a list I created the list with a blank entry at the top. It is therefore more obvious which lists have already had an entry selected and which are yet to be processed since once an entry is selected in a list all of the others are removed. This blank entry is also required in order to ensure that the Javascript gets called when a selection is made.

Here's the code that produced one of the dropdowns in the example. The entire select was copied twice (and the number in front changed) to produce the additional dropdowns. This code also shows how to add the reset button to the form so that it will reset all of the selects back to their original values. Note that the arrays in the call must contain those original values in order for the script to know what to set them back to and the entire onclick must be coded on the one line.

<form action="#">
<div id="x">
// repeat below code
1. <select onchange="listSel(this,'x')">
<option value=" " selected="selected"></option>
<option value="A">Option One</option>
<option value="B">Option Two</option>
<option value="C">Option Three</option>
<option value="D">Option Four</option>
</select>
// repeat above code
<input type="button" value="reset" onclick="resetSel('x',
[[' ',' '],['A','Option One'],['B','Option Two'],
['C','Option Three'],['D','Option Four']])">
</div>
</form>

The important points to note with regard to selection lists that form part of an ordered dropdown are:

• that the first entry in the dropdowns be blank
• that the select code for each dropdown be identical
• that all of the dropdowns be within a form or div identified with an id attribute
• the id attribute of that container must be specified as the second parameter passed to the listSel function
• the number of lists must not be greater than the number of options

Apart from these restrictions, the number of options in the dropdown lists, the values and text for each option, and the number of dropdown lists are entirely up to you.