...

View Full Version : change CSS style using javascript and dropdown menu



mtd
10-26-2003, 06:41 PM
I am trying to make a script that will change the visibility of certain parts of a page depending on what users select in the dropdown box. What I have so far is posted below, and I am stuck where the #### signs are - presumably I need some type of handler or function to make the script change the style, but I am not sure exactly what to do. I am not a very advanced coder, so I apologize if what I have done so far is headed in the complete wrong direction. Thanks!



<head><script language="javascript">
function Login(){
var data=document.form1.data.value;
if (data=="1") { ####(form2a.style.display='inline') }
if (data=="2") { ####(form2a.style.display='inline') }
}
</script></head>

<body><form name="form1">
<select name="data" size="1" onchange="Login()">
<option name="1" value="1">choice1</option>
<option name="2" value="2">choice2</option>
</select></form>

<div id="form2a" style="display:none">
this message will be displayed or not depending on the selection
</div></body>

adios
10-27-2003, 02:28 AM
<html>
<head>
<script language="javascript">

function Login(oSelect)
{
var oDiv = document.getElementById('form2a'), data = oSelect.options[oSelect.selectedIndex].value;
if (data == "1")
oDiv.style.display = 'block';
if (data == "2")
oDiv.style.display = 'none';
}

</script>
</head>
<body>
<form name="form1">
<select name="data" size="1" onchange="return Login(this)">
<option value="" selected="selected">Login</option>
<option name="1" value="1">show me</option>
<option name="2" value="2">hide me</option>
</select>
</form>
<div id="form2a" style="display:none">
this message will be displayed or not depending on the selection
</div>
</body>
</html>

mtd
10-27-2003, 11:15 PM
thanks adios, worked like a charm. Now if I wanted to have two divs to show or hide, depending on the selection, what would I do? I tried the code below - based on what you wrote (except I changed some names to make them easier for me). What I want to happen is for selection 1 to show form2a and hide form2b, and selection 2 to do the opposite. However, the way it is below, 2 works how it should, but 1 shows both. Cant figure out why.


<html><head>
<script language="javascript">

function Go(oSelect)
{
var oDiv1 = document.getElementById('form2a'), oDiv2 = document.getElementById('form2b'), data = oSelect.options[oSelect.selectedIndex].value;
if (data == "1")
oDiv2.style.display = 'none';
oDiv1.style.display = 'block';
if (data == "2")
oDiv1.style.display = 'none';
oDiv2.style.display = 'block';
}

</script></head>

<body>
<form name="form1">
<select name="data" size="1" onchange="return Go(this)">
<option value selected="selected">Login</option>
<option name="1" value="1">show 1</option>
<option name="2" value="2">show 2</option>
</select>
</form>

<div id="form2a" style="display:none">
shows content ONE
</div>
<div id="form2b" style="display:none">
shows content TWO
</div>

</body></html>

adios
10-28-2003, 05:04 AM
Uh-oh. My bad.


if (data == "1")
oDiv.style.display = 'block';

You'll notice: no curly braces after the condition. Why? Because without them, exactly one statement, after the condition, will be associated with it. Exactly what we want here, since there is only one statement.


if (data == "1")
oDiv2.style.display = 'none';
oDiv1.style.display = 'block';

Oops! Now there are two statements associated with it. Only the first will be conditional - the second runs regardless. So far so good (inadvertently, anyway). Then this runs:


if (data == "2")
oDiv1.style.display = 'none';
oDiv2.style.display = 'block';

This time the first statement is skipped - as you intended - but the second, not associated with the conditional, is run. Bad dog.


if (data == "1")
{
oDiv2.style.display = 'none';
oDiv1.style.display = 'block';
}
else if (data == "2")
{
oDiv1.style.display = 'none';
oDiv2.style.display = 'block';
}

Some people recommend doing this even with single statements after conditionals. I prefer the abbreviated syntax, but apologize for using it in this context.

mtd
10-28-2003, 11:28 PM
Thanks very much. no problem - i am new at this, so the fact that you were able to explain the difference and why it worked the way it did was great. Thank you for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum