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.
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).
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:
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.
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.
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.