Javascript Interactive Menus

One of the neat things I've been able to do with Javascript is that of cascading menus for interactivity.
Suppose for example, you were one of those utterly unlikeable car dealers and you had a mom-and-pop web site where you wanted the customer to check out your offerings before coming in so you could fleece him on the price.
Moreover you have a whole range of cars available - Fords,Chevies Toyoyta, etc.
The website would be database driven, and the customer would want to see what models of cars were available with the price etc. A simple interactive Javascript app. would look like the following:

The arrow depicts the hierarchy of interactivity, i.e any change to a menu bar will result in a change to all menubars below it.
So for example, if a customer chose
Ford ---> Taurus ---> 1992, he would see a price of say, $9000 and if then he changed to Ford ---> Mustang
the price shown would change accordingly. A simple app, but one that demonstrates the usefulness of the interactivity of Javascript. Here is how we would implement such a page say, using Perl 5.

1. Load the data from the database when the page is called.
2. Assume the data is returned in an ordered array of the form (Type,Model,Year,price) viz:
Ford,Mustang,1990,$10000
Ford,Mustang,1991,$12000
...
Ford,Mustang,1998,$20000
Ford,Taurus,1991,$6000
Ford,Taurus,1992,$7000
...
Toyota,Corolla,1990,$7000
This can be represented as follows: .

i.e. they are grouped by Make,Model and ordered by
Year.

2. Set up Java script arrays corr. to the levels in the
hierarchy:
Years=new Array();
Make=new Array();
Model=new Array();
Price=new Array();

Loop through the data array, populating the Javascript arrays:
while (@dataarray)
{
($make,$model,$year,$price)=split(@datarray[$i])
// Only add new entry to javascript array if new Make encountered
if ($make ne $prevmake)
{
// Write arrays into response content

print "Make[$makeidx]=$make\n";
print "Model[$makeidx]=new Array()\n";
print "Price[$makeidx]=new Array()\n";
print "Year[$makeidx]=new Array()\n";
$prevmake=$make;

}
if ($model ne $prevmodel)
{
print "Model[$makeidx][$modelidx]=$model\n";
print "Price[$makeidx][$modelidx]=new Array()\n";
print "Year[$makeidx][$modelidx]=new Array()\n";
$prevmodel=$model;
}

print "Year[$makeidx][$modelidx][$yidx]=$year\n";
print "Price[$Makeidx][$modelidx][$yidx]=$price\n";

}


3. The previous step basically involved writing the
guts of the code to generate the Javascript data arrays.
Next we move to write the event handlers which will enable
the page to be interactive.

i. UpdateSelection - this is a generalized handler which
handles the updating of menus lower in the hierarchy when
a parent's selected value is changed.

It takes 2 args : a handle to the form, and an integer
specifying which menu was changed
0 - Make
1 - Model
2 - Year,Price

UpdateSelection(form,obj, fld)
{
var listlen=obj.length;
var mkidx=form.make.options.selectedIndex;

/* Set the index of the selected option */
obj.options.selectedIndex=0;
if (field==0)
{
// Grab index of newly selected Model

var len=Model[mkidx].length;
for (cnt=0;cnt {
obj.options[cnt].text=Model[mkidx][cnt];
}
else if (field==1) {
var modidx=form.model.options.selectedIndex;

var len=years[mkidx][modidx].length;

for (cnt=0;cnt {
obj.options[cnt].text=Years[mkidx][modidx][cnt];
}
}

else{
var modidx=form.model.options.selectedIndex;
var yidx=form.year.options.selectedIndex;
form.price.value=price[mkidx][modidx][yidx];
}
}

Demonstration.
To see the Javascript in action on the page specified by this link, try changing the selection of any of the menus (Make,Model,Year) and watch the ones below also change.

Source Code.