<%@ LANGUAGE=JAVASCRIPT %>
<html>
<head>
<title>
2 dynamic drop downs using Javascript</title><script language
="JavaScript">catopt = new Array; //this array stores the main dropdown text
catopt[0] = "First";
catopt[1] = "Second";
catopt[2] = "Third";
siteopt = new Array; //this array stores the second dropdown text for the first catagory
siteopt[0] = "FirstOne"
siteopt[1] = "FirstTwo"
siteopt[2] = "FirstThree"
var trueLength = siteopt.length; //stores how many options are currently in the second dropdown
var lst = siteopt.length; //stores how many options are currently in the second dropdown
function changeMenu()
{
siteopt.length = 0;
menuNum = document.SelectMenu.SelectPrimary.selectedIndex;
//document.[Form Name].[Main Option Name].selectedIndex this grabs the index of the selected option in the main dropdown
/*
the next few if statements are based on the selected index of the main dropdown.
the array stores the values of the second dropdown options that are associated with the currently selected main dropdown
*/
if (menuNum == null) return;
if (menuNum == 0)
{
siteopt = new Array;
siteopt[0] = new Option("FirstOne");
siteopt[1] = new Option("FirstTwo");
siteopt[2] = new Option("FirstThree");
}
if (menuNum == 1)
{
siteopt = new Array;
siteopt[0] = new Option("SecondOne");
siteopt[1] = new Option("SecondTwo");
siteopt[2] = new Option("SecondThree");
}
if (menuNum == 2)
{
siteopt = new Array;
siteopt[0] = new Option("ThirdOne");
siteopt[1] = new Option("ThirdTwo");
siteopt[2] = new Option("ThirdThree");
}
tot = siteopt.length; //grabs how many options are now in the second dropdown
for (i = lst; i > 0; i--)
{
document.SelectMenu.SelectSecondary.options[i] = null;
/* document.[Form Name].[Select Name].options[i] this gets rid of the secondary options */
}
for (i = 0; i < tot; i++)
{
document.SelectMenu.SelectSecondary.options[i] = siteopt[i];
/* document.[Form Name].[Select Name].options[i] this puts the new options in the menu */
}
document.SelectMenu.SelectSecondary.options[0].selected = true; //selects the first option in the second dropdown
lst = siteopt.length; //grabs how many options are now in the second dropdown
}
</script>
</head>
<body>
<script language
="Javascript1.1">// writes out the table and dropdown menus
with(document)
{
writeln('<TABLE><TR><TD>');
writeln('<FORM NAME = "SelectMenu">');
writeln('<SELECT NAME="SelectPrimary" onChange="changeMenu(this.form)">');
tot = catopt.length;
for (i = 0; i < tot; i ++)
{
writeln("<OPTION>" +catopt[i]+" </OPTION>");
}
writeln("</SELECT>");
writeln("</TD><TD>")
writeln('<SELECT NAME="SelectSecondary">');
for (i = 0; i < trueLength; i ++)
{
writeln("<OPTION>" +siteopt[i]+" </OPTION>");
}
writeln("</SELECT></TD></TR></TABLE>");
}
</script>
</body>
</html>