Menu
The following code works, but is not what I’m looking for. This code requires that the value of the combo box be the same as the “suffix” of the div ID. Can someone tell me- can this be re-written so that the DIV ID does NOT have to match the combo box value? I need them to be unique because the option selected in the list won’t always result in the same DIV ID showing. Thanks!
[CODE]
<script type=”text/javascript”>
function showDiv(prefix,chooser)
{
for(var i=0;i<chooser.options.length;i++)
{
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = ‘none’;
}
var selectedOption = (chooser.options[chooser.selectedIndex].value);
if(selectedOption == “1”)
{
displayDiv(prefix,”1″);
displayDiv(prefix,”2″);
}
else if(selectedOption == “2”)
{
displayDiv(prefix,”2″);
displayDiv(prefix,”3″);
}
else if(selectedOption == “3”)
{
displayDiv(prefix,”3″);
displayDiv(prefix,”4″);
}
else if(selectedOption == “4”)
{
displayDiv(prefix,”1″);
displayDiv(prefix,”4″);
}
}
function displayDiv(prefix,suffix)
{
var div = document.getElementById(prefix+suffix);
div.style.display = ‘block’;
}
</script>
[code=html]
<body>
<div id=”body” style=”width:300px;”>
<div>
<form name=”frmOptions”>
<select id=”cboOptions” onChange=”showDiv(‘div’,this)”>
<option value=”1″>Option1</option>
<option value=”2″>Option2</option>
<option value=”3″>Option3</option>
<option value=”4″>Option4</option>
</select>
</div>
<div id=”content” style=”float:right;”>
<div id=”div1″ style=”display:none;”>Test</div>
<div id=”div2″ style=”display:none;”>Test</div>
<div id=”div3″ style=”display:none;”>Test</div>
<div id=”div4″ style=”display:none;”>Test</div>
</div>
</form>
</div>
</body>