Fred said:
I need to produce a two-level dropdown box so the client can select
an item from LIST X and another from LIST Y and the end result would
be to open a new page. X+Y=Z I use a single level drop down box see
http://www.tourist-information.biz/ but I'm sure I saw a double one
mentioned on this list earlier. Any help would be most appreciated.
Fred
Here's one example from the Javascript Source
You may need to modify it a bit. I haven't actually tried it. You can always look on their website for other examples
<html>
<head><script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source ::
http://javascript.internet.com
Created by: Christian Heilmann ::
http://www.icant.co.uk/ */
function populate(o) {
d=document.getElementById('de');
if(!d){return;}
var mitems=new Array();
mitems['Choose']=[''];
mitems['Salads']=['Select Item','Tuna Salad','Cesar Salad','Green Salad','Prawn Salad'];
mitems['Main Courses']=['Select Item','Filet Mignon','Porterhouse','Flank','T-Bone'];
mitems['Drinks']=['Select Item','Milkshake','Soda','Mixed Drink','Juice'];
mitems['Desserts']=['Select Item','Ice Cream','Fresh Fruit','Pie'];
mitems['Snacks']=['Select Item','Brownies','Cookies','Potato Chips'];
d.options.length=0;
cur=mitems[o.options[o.selectedIndex].value];
if(!cur){return;}
d.options.length=cur.length;
for(var i=0;i<cur.length;i++) {
d.options
.text=cur;
d.options.value=cur;
}
}
</script>
</head>
<body>
<form action="" method="get">
<label for="or">Our menu:</label>
<select name="or" id="or" onchange="populate(this)">
<option value="Choose">Select from the Menu</option>
<option value="Salads">Salads</option>
<option value="Main Courses">Main Courses</option>
<option value="Drinks">Drinks</option>
<option value="Deserts">Deserts</option>
<option value="Snacks">Snacks</option>
</select>
<label for="de">Select:</label>
<select name="de" id="de"></select>
<input type="submit" value="Show me" />
</form>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>
</body>
</html>