![pixel](src="/images/p.gif")
|
 |
Dynamically generate a dropdownThis code lets you dynamically populate a HTML form dropdown based on which option a user selects in another dropdown.
<html>
<head>
<title>Dropdown Javascript</title>
<script language="javascript" type="text/javascript">
function SelectSubCat()
{
removeAllOptions(Dropdown.Subcategory);
if(Dropdown.Category.value == 'Cat1'){
addOption(Dropdown.Subcategory,"Subcat1.1", "Subcategory 1.1");
addOption(Dropdown.Subcategory,"Subcat1.2", "Subcategory 1.2");
addOption(Dropdown.Subcategory,"Subcat1.3", "Subcategory 1.3");
}
if(Dropdown.Category.value == 'Cat2'){
addOption(Dropdown.Subcategory,"Subcat2.1", "Subcategory 2.1");
addOption(Dropdown.Subcategory,"Subcat2.2", "Subcategory 2.2");
addOption(Dropdown.Subcategory,"Subcat2.3", "Subcategory 2.3");
}
} // end function SelectSubCat
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
selectbox.remove(i);
}
}
function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
</script>
</head>
<body>
<form name='Dropdown' method='post' action='formresults.php'>
<select name='Category' onChange='SelectSubCat();'>
<option value=''>Select...</option>
<option value='Cat1'>Category 1</option>
<option value='Cat2'>Category 2</option>
</select>
<select id='Subcategory' name='Subcategory'>
<option value=''>Select...</option>
</select>
<input type='submit' value='Submit'>
</form>
</body>
</html>
|
Comments
Comment by dave on 2006-12-06
i love it. but it doesn\'t work in safari.
|
|
|
