Ordered Dropdowns

When you need your visitors to select one out of several items then the obvious form field to use for that selection is radio buttons which only allow one item within a group to be selected. Where you need then to be able to select two or more from a group but the order of those selections isn't important then checkboxes are the obvious choice.

Where a specific number of items from a list need to be selected and the order of those selections is also important then a number of drop down lists that all initially contain the same list of values is a good starting point. The first list represents your visitor's first selection, the second list their second selection and so on.

The only problem is that the drop down lists will allow them to make the same choice in multiple lists. This means that we will need to validate on the server for duplicate selections so that our code will still work with JavaScript disabled.

Where the browser does have JavaScript enabled we can avoid the duplicates problem by updating the content of the various lists when a selection is made. We will remove the already selected entries from the lists where your visitor has yet to make a selection as well as removing the unselected items from the list where they have made a selection. This will leave the selected entries as the only ones in their list while the lists where a selection is yet to be made will only list those entries that are still available to select.

Here is an example showing three drop down lists with four entries to select from. Simply select one of the non-blank entries in any one of the dropdowns and then see the effect that has on the values displayed in each. The code also detects once you have selected an entry from each list in order to perform additional processing (in the example it just pops up an alert).

1. 2. 3.

To be able to get the dropdown lists to delete the appropriate entries from the various dropdowns you first need to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called orddrop.js.


You then link this code into the web page just before the </body> tag using the following code:

<script src="orddrop.js" type="text/javascript">

The one JavaScript function performs all of the needed processing to update all of the lists regardless of how many lists there are and regardless of how many entries they contain.

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>
// repeat above code
<input type="button" value="reset" onclick="resetSel('x',
continued from previous line[[' ',' '],['A','Option One'],['B','Option Two'],
continued from previous line['C','Option Three'],['D','Option Four']])">

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

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.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow