You'll need Javascript if you want it in realtime.
Use an onchange event on the menus that will change the others. Each select box has a selectedIndex property you can use to get the currently selected item, or set the selected item. For example:
Code:
var current = menu1.options[menu1.selectedIndex].value;
if(current == "some value")
menu2.selectedIndex = 3;
More examples/info:
http://www.javascriptkit.com/jsref/select.shtml
Here's a simple working demo:
HTML Code:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
/**
* Set the selected option of a select
* box to the first occurance of val.
* @param The select box
* @param The value to look for
*/
function setSelectValue(sbox, val)
{
// Assume its an ID
if(typeof sbox == 'string')
sbox = document.getElementById(sbox);
if(!sbox) return;
// Set the correct value
for(i = 0; i < sbox.options.length; i++)
{
if(sbox.options[i].value == val)
sbox.selectedIndex = i;
}
}
/**
* Get the value of the selected option.
* @param The select box
*/
function getSelectValue(sbox)
{
// Assume its an ID
if(typeof sbox == 'string')
sbox = document.getElementById(sbox);
if(!sbox) return;
return sbox.options[sbox.selectedIndex].value;
}
/**
* Change menu2 selected item based on menu1
*/
function menu1_onchange(sbox)
{
val = getSelectValue(sbox);
if(val == "cool")
setSelectValue("menu2", "high");
else
setSelectValue("menu2", "poor");
}
</script>
</head>
<body>
I am a
<select id="menu1" onchange="menu1_onchange(this)">
<option value="cool">Cool</option>
<option value="geek">Geeky</option>
</select>
person.
<br /><br />
I think of myself very
<select id="menu2">
<option value="high">Highly</option>
<option value="poor">Poorly</option>
</select>
.
</body>
</html>
05-11-2006, 02:44 AM
Conditional Pulldown Menu
Linear Mode
