Two Level Selection Lists - Part II


Level: Intermediate
Skills Required: JavaScript Functions, Events, Arrays and HTML Forms


Continued:

Welcome to the second part of the "Two-Level Selection Lists." Last week, we discussed the logical solution to a problem and this week we will move to the implementation part.

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.

The copyright of the article Two Level Selection Lists - Part II in JavaScript is owned by Muhammad Ali Shah. Permission to republish Two Level Selection Lists - Part II in print or online must be granted by the author in writing.

Go To Page: 1 2

Articles in this Topic    Discussions in this Topic