JavaScript

  1. Home
  2. Computing & Technology
  3. JavaScript

Ordered Dropdowns

Part 1 : Introduction

By Stephen Chapman, About.com

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.

Let's look at an example of using multiple dropdown lists for ordered selection so that you can see for yourself how it works.

Explore JavaScript

About.com Special Features

JavaScript

  1. Home
  2. Computing & Technology
  3. JavaScript
  4. Script Library
  5. More Complete Scripts
  6. JavaScript Ordered Dropdown Selections

©2009 About.com, a part of The New York Times Company.

All rights reserved.