java
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.
Product Name Variety Price
T-Shirt
Small
Medium
Large
Rs. 230
Rs. 240
Rs. 250
Book
Paperback
Hardcover
Rs. 125
Rs. 135
Mouse
Two Buttons
Three Buttons
Rs. 125
Rs. 125

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):
<html>
<head>
<title>"JavaScript Selection List"</title>

</head>

<body>
<form name="example">
<select name="tshirts" onChange="showPrice()">
<option>Please choose a size
<option>Small
<option>Medium
<option>Large
</select>
<input type="text" name="priceBox">
</form>
</body>
</html>
If you are familiar with JavaScript functions and events, the above code is not difficult to understand. Please make sure that you understand the logic behind it, as our further discussion will be based on it.

Logical Solution

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.

Required Methods

As you may have noticed, we need to know the JavaScript functions to add and remove items from a list. The following two functions are helpful in this regard:
    • 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[5] = 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[1] = null.
We can also get the number of items in a selection list by formName.selectionListName.length.

HTML Body

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“. The JavaScript functions showVarieties() and showPrice() are called when the user selects a different item from the Products and Variety lists respectively.
<body>
<center>
<form name="example">
<select name="product" onChange="showVarieties()">
<option>Please choose a product
<option>T-Shirt
<option>Book
<option>Mouse
</select>

<select name="variety" onChange="showPrice()">
<option>Please choose a variety
</select>

<input type="text" name="priceBox" value="Price">
</form>
</center>
</body>

JavaScript Part

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[0] = "Small"; // populating tShirt
tShirt[1] = "Medium";
tShirt[2] = "Large";

book[0] = "Paperback"; // populating book
book[1] = "Hardcover";

mouse[0] = "Two Buttons"; // populating mouse
mouse[1] = "Three Buttons";

Show Varieties

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:
function showVarieties()
{
// 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[0] = new Option ("Please choose a variety");

// selectedIndex gives the number of the selected item
// call showTShirt(), showBook() or showMouse()
switch (example.product.selectedIndex)
{
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” option.
function showTShirt()
{
for (i=0; i<tShirt.length; i++)
example.variety.options[i+1] = new Option(tShirt[i]);
}

function showBook()
{
for (i=0; i<book.length; i++)
example.variety.options[i+1] = new Option(book[i]);
}

function showMouse()
{
for (i=0; i<mouse.length; i++)
example.variety.options[i+1] = new Option (mouse[i]);
}

Show Price

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:
function showPrice()
{
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;
}

Last Words

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.