dynamic select menu
This one's JavaScript. A server side solution would also be required.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>select change 2nd select</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;
f.box2.options.length=null;
for(var i=0; i<varieties[idx].length; i++) {
f.box2.options[i]=new Option(varieties[idx][i], i);
}
}
window.onload=function() {
var box1=document.myform.box1;
box1.onchange=function(){Box2(this.selectedIndex);};
// create 2nd select
try { // IE
var sel=document.createElement("<select name=\"box2\"><\/select>");
}
catch(e) {
var sel=document.createElement("select");
sel.name = "box2";
}
document.myform.getElementsByTagName('fieldset')[0].insertBefore(sel, box1.nextSibling);
// fill 2nd select
Box2(0);
}
</script>
</head>
<body>
<form name="myform" method="post" action="http://www.mysite.com/mysite">
<fieldset><legend>fruit</legend>
<select name="box1">
<option value="a">apple</option>
<option value="b">pear</option>
<option value="c">orange</option>
</select>
<button type="submit">submit</button>
</fieldset>
</form>
</body>
</html>
Dynamic menu help please
Reply With Quote
Bookmarks