Hi guys,
Sorry my Javascript knowledge is seriously more rusty than I had original hoped for
I'm trying to use a conditional drop-down box to display certain CSS Div's based on certain selections. I found some code on here but i'm having issues getting it to work
Can't remember what to do regarding 'if' and 'if else' to get this functioning properly.
Code:
<script language="javascript">
function Go(oSelect)
{
var oDiv1 = document.getElementById('form2a'), oDiv2 = document.getElementById('form2b'), oDiv3 = document.getElementById('form2c'),data = oSelect.options[oSelect.selectedIndex].value;
if (data == "1")
oDiv1.style.display = 'block';
oDiv2.style.display = 'block';
oDiv3.style.display = 'block';
if (data == "2")
oDiv1.style.display = 'none';
oDiv2.style.display = 'block';
oDiv3.style.display = 'block';
if (data == "3")
oDiv1.style.display = 'block';
oDiv2.style.display = 'none';
oDiv3.style.display = 'block';
if (data == "4")
oDiv1.style.display = 'block';
oDiv2.style.display = 'block';
oDiv3.style.display = 'none';
}
</script>
</head>
<body>
<form name="form1">
<select name="data" size="1" onchange="return Go(this)">
<option value selected="selected">Select</option>
<option name="1" value="1">select1</option>
<option name="2" value="2">select2</option>
<option name="3" value="3">select3</option>
<option name="4" value="4">select4</option>
</select>
</form>
<div id="form2a" style="display:none">
shows content ONE
</div>
<div id="form2b" style="display:none">
shows content TWO
</div>
<div id="form2c" style="display:none">
shows content Three
</div>
Thanks in advance