View Single Post
Old 07-07-2009, 04:39 PM   PM User | #1
benlekreme
New to the CF scene

 
Join Date: Jul 2009
Posts: 8
Thanks: 7
Thanked 0 Times in 0 Posts
benlekreme is an unknown quantity at this point
Thumbs up Simple multi CSS div display from drop down box!

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
benlekreme is offline   Reply With Quote