The latest trends in web development
favor more client side power. One of the distinctive advantages of doing so is saving costly trips to the server to get simple things done. For example, verifying a form on client side is better than first letting the user submit the form and then telling him to go back and make corrections.
Two level selection lists are the client side solution to problems in which the user must be asked to make two consecutive selections, where the available choices of the second depend on the first selection. In this article, we will try to develop such a system.
- Suppose we are building a shopping store where we are selling three different products available in different varieties, as shown below. We want to let the user select a product and a variety and show him the price.
Selection List Review
We will digress here, momentarily, to review the syntax of selection lists
. The following example handles only first one of the above cases (i.e., its one level selection list):
<select name="tshirts" onChange="showPrice()">
<option>Please choose a size
<input type="text" name="priceBox">
A natural way to build the system discussed in the abstract is to have two selection lists. One of them will display the available products (i.e., t-shirt, book and mouse) and the other will display the available varieties of the selected product. The second selection list will be empty by default; when the user selects one of the products, the second selection list will be populated with the available varieties of the selected product. Next, when a variety is selected (from the second selection list), the price box will show the price.
- Adding Item You can add items dynamically in a selection list by creating a new option at the end of the list. For example, to add an item at 6th position, the syntax will be formName.selectionListName.options = new Option(“text“).
- Removing Item To remove ith item from the list, assign it a null value. For example, to remove the second item from the list you can write formName.selectionListName.options = null.
We can also get the number of items in a selection list by formName
We need two selection lists and a text box. Let’s write the body of the HTML page as follows. The two selection lists have been named as “product
” and “variety
“, while the price textbox is named as “priceBox
<select name="product" onChange="showVarieties()">
<option>Please choose a product
<select name="variety" onChange="showPrice()">
<option>Please choose a variety
<input type="text" name="priceBox" value="Price">
Programming is an art – there are several ways of handling the same problem. The choice of a particular one is a personal preference. I go for the easiest one to comprehend while being easier to modify. That’s why I would prefer making arrays to hold the possible varieties of each product. The arrays can be declared and populated as shown below:
var tShirt = new Array (3); // declaring arrays
var book = new Array (2);
var mouse = new Array (2);
tShirt = "Small"; // populating tShirt
tShirt = "Medium";
tShirt = "Large";
book = "Paperback"; // populating book
book = "Hardcover";
mouse = "Two Buttons"; // populating mouse
mouse = "Three Buttons";
Next comes the first selection list. This selection list calls the showVarities() to update the second list. Naturally, if we select “mouse
” after selecting “book
“, the second list must delete all the entires of the “book
” and add those of the “mouse
“. In general, we will have to clear out the second selection list every time the first one changes. Thats exactly what the first line of the following function does:
// example is the form name
// variety is the selection list name
// options is the arrays that holds the options of a list
for (i=0; i<example.variety.length; i++)
example.variety.options[i] = null;
// add a new option to the list
example.variety.options = new Option ("Please choose a variety");
// selectedIndex gives the number of the selected item
// call showTShirt(), showBook() or showMouse()
case 1: showTShirt(); break;
case 2: showBook(); break;
case 3: showMouse(); break;
The functions called from showVarieties()
are not difficult to comprehend. They simply add the items from their respective arrays into the variety
selection list. All of these functions consist of a single for
loop. The elements are added to the options starting from 1 (rather than 0) because the first entry is left for “Please choose a variety
for (i=0; i<tShirt.length; i++)
example.variety.options[i+1] = new Option(tShirt[i]);
for (i=0; i<book.length; i++)
example.variety.options[i+1] = new Option(book[i]);
for (i=0; i<mouse.length; i++)
example.variety.options[i+1] = new Option (mouse[i]);
The last function is the one that updates the price text box. Using the same concept presented above, we will change the contents of the text box:
var price = "";
var productNr = example.product.selectedIndex;
var varietyNr = example.variety.selectedIndex;
// at productNr == 1, we have the T-Shirt
if (productNr == 1)
if (varietyNr == 1) price = "230";
else if (varietyNr == 2) price = "240";
else if (varietyNr == 3) price = "250";
// at productNr == 2, we have the book
else if (productNr == 2)
if (varietyNr == 1) price = "125";
else if (varietyNr == 2) price = "135";
// at productNr == 3, we have the mouse
else if (productNr == 3)
if (varietyNr == 1) price = "125";
else if (varietyNr == 2) price = "125";
example.priceBox.value = price;
The following ideas were presented in this dual:
- formName.selectionName.options[index] = null is used to remove an entry from a selection list.
- formName.selectionName.options[index] = new Option (“some text“) is used to add a new option.
- formName.selectionName.length is used to get the number of items in a selection list.
- formName.selectionName.selectedIndex is used to get the number of the selected item in the list.