Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    mtd
    mtd is offline
    Regular Coder
    Join Date
    Jun 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    change CSS style using javascript and dropdown menu

    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!

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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <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>

  • #3
    mtd
    mtd is offline
    Regular Coder
    Join Date
    Jun 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

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

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Uh-oh. My bad.
    Code:
    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.
    Code:
    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:
    Code:
    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.
    Code:
    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.

  • #5
    mtd
    mtd is offline
    Regular Coder
    Join Date
    Jun 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •