Triple Menu Javascript

Populating dropdown values are always hard for me according to a chosen value for web applications. But most recently I went through a website which gave soem javascripts to build dropdowns. I'm saying hard because this involves in 3 dropdown menus. Second dropdown should populate according to the first dd's value and third according to the second.

This post post focuses only in creating triple menu and this needs a form and 3 dds. According to my script I have named form as '_form' and 3 dds accordingly 'menu','menuCat'and 'menuSubCat'. First dd should be filled with values and the script will populate the rest according to the selection.





/* ######## start of Triple menu code ############### */
function nullOptions(aMenu)
{
aMenu.options.length=0;
}

/* ########### Category starts here ########### */
/* Category for A */
function Cat1(aMenu)
{
nullOptions(aMenu);
with (aMenu){
options[0]=new Option("","");
options[1]=new Option("A.1.0","A.1.0");
options[0].selected=true
}
}
/* Category for B */
function Cat2(aMenu)
{
nullOptions(aMenu);
with (aMenu){
options[0]=new Option("","none");
options[1]=new Option("B.1.0","B.1.0");
options[2]=new Option("B.2.0","B.2.0");
options[3]=new Option("B.3.0","B.3.0");
options[0].selected=true
}
}
/* ############ Category Ends here ########### */

/* ########## Sub Category starts here ########### */

/* ########## lists of values for option 3 SubCategory:A.1.0 ######### */
function SubCat1c(aMenu)
{
nullOptions(aMenu)
with (aMenu){
options[0]=new Option("","");
options[1]=new Option("A.1.1","A.1.1");
options[0].selected=true
}
}
/* ######### end of values for option 3 SubCategory:A.1.0 ###### */

/* ########## lists of values for option 3 SubCategory:B.1.0 ########## */
// start of files for main option 3 B.1.0
function SubCat1(aMenu){
nullOptions(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("","");
options[1]=new Option("B.1.1","B.1.1");
options[0].selected=true
}
/*//Netscape likes a refresh, but Microsoft doesn't
if (navigator.appName.indexOf("Netscape")>-1)
history.go(0)*/
}
// Sub Category for B.2.0
function SubCat2(aMenu)
{
aMenu.options.length=0;
with (aMenu){
options[0]=new Option("","");
options[1]=new Option("B.2.1","B.2.1");
options[2]=new Option("B.2.2","B.2.2");
options[3]=new Option("B.2.3","B.2.3");
options[0].selected=true
}
}
// Sub Category for B.3.0
function SubCat3(aMenu)
{
aMenu.options.length=0;
with (aMenu){
options[0]=new Option("","");
options[1]=new Option("B.3.1","B.3.1");
options[2]=new Option("B.3.2","B.3.2");
options[3]=new Option("B.3.3","B.3.3");
options[0].selected=true
}
}
/* ######### end of values for option 3 SubCategory:B.1.0 ####### */

/* ########## Sub Category ends here ######### */

/* ############# change Categories ########### */
function changeCat(){
aMenu=document._form.menuCat;
aMenu2=document._form.menuSubCat;
aMenu3=document._form.menu;
with (aMenu3){
switch (selectedIndex) {

case 0:
nullOptions(aMenu)
nullOptions(aMenu2)
aMenu.options[0]=
new Option("","none")
aMenu3.options[0].selected=true;
break

case 1:
nullOptions(aMenu)
nullOptions(aMenu2)
aMenu2.options[0]=
new Option("","none")
aMenu2.options[0].selected=true;
Cat1(aMenu)
break

case 2:
nullOptions(aMenu)
nullOptions(aMenu2)
aMenu2.options[0]=
new Option("","none")
aMenu2.options[0].selected=true;
Cat2(aMenu)
break
}
}
}
/* ############ end of change Categories ################ */

/* ################ change SubCategories ############# */
function changeSubCat()
/** bookmark: starting { sign for the final } **/
{
aMenu=document._form.menuCat;
aMenu2=document._form.menuSubCat;
aMenu3=document._form.menu;

/* ######## set of values for option 3 - Sub Category for B.1.0 ###### */
if (aMenu3.selectedIndex==2)
{
with (aMenu){
switch (selectedIndex) {
case 0:
aMenu2.options.length=0;
aMenu2.options[0]=
new Option("","")
aMenu2.options[0].selected=true;
break

case 1:
SubCat1(aMenu2)
break

case 2:
SubCat2(aMenu2)
break

case 3:
SubCat3(aMenu2)
break
}
}
}

/* ######## set of values for option 3 Sub Category for A.1.0 ###### */

if (aMenu3.selectedIndex==1)
{
with (aMenu){
switch (selectedIndex) {

case 0:
aMenu2.options.length=0;
aMenu2.options[0]=
new Option("","")
aMenu2.options[0].selected=true;
break

case 1:
SubCat1c(aMenu2)
break
}
}
}

}
/* ############# end of Triplemenu code #############

For now I like to leave the exaplanation part. Will edit this post soon :).

Cheers!