This example fills a second select according to the selected option in the first select.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Change 2nd option box</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
var varieties=[
["varieties","granny smith","golden delicious","jonathan"],
["varieties","anjou","bartlett","conference"],
["varieties","valencia","pineapple","pera"]
];
function Box2(idx) {
var f=document.myform;
// clear the 2nd option box
f.box2.options.length=null;
for(i=0; i<varieties[idx].length; i++) {
//create new option (text, value)
f.box2.options[i]=new Option(varieties[idx][i], i);
}
}
//-->
</script>
</head>
<body onload="Box2(0); ">
<form name="myform" method="post" action="http://www.mysite.com/mysite">
<select name="box1" onchange="Box2(this.selectedIndex);">
<option value="a">apple</option>
<option value="b">pear</option>
<option value="c">orange</option>
</select>
<select name="box2">
</select>
</form>
</body>
</html>