Conditional Pulldown Menu [Archive]

sketch42

05-11-2006, 02:44 AM

I have 3 pulldown menu's and i want it so that if i select say Option1 in Pulldown menu 1 than Option 3 in Pulldown menu 2 automatically gets selected. is this possible using standard html or do i need a javascript

Freesteyelz

05-14-2006, 03:43 AM

Will this be a User CP or Admin CP select?

sketch42

05-14-2006, 02:03 PM

its for a non vb page

Chroder

05-15-2006, 01:17 AM

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:

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>
<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>