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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show / Hide Div Multiple Div's

    Let me start by saying I'm a noob to JavaScript.

    What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right. Here's what I got:

    Code:
    <body>
      <script type="text/javascript">
    function toggle_visibility(){
    	for(var i = 0,len = arguments.length;i < len; i++){
        var e = document.getElementById(arguments[i]).style,d = e.display;
        e.display = (d == "block") ? "none" : "block";
      }
    }
    </script>
    
      <select name="select" id="select">
        <option>0</option>
        <option onclick="toggle_visibility('1');" >1</option>
        <option onclick="toggle_visibility('1','2');">2</option>
        <option onclick="toggle_visibility('1','2','3');">3</option>
        <option onclick="toggle_visibility('1','2','3','4');">4</option>
      </select><br>
    <div id="1" style="display: none;">Test1</div>
    <div id="2" style="display: none;">Test2</div>
    <div id="3" style="display: none;">Test3</div>
    <div id="4" style="display: none;">Test4</div>
    </body>
    Any help would be appreciated, cause I'm lost.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,438
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Well, for starters, you can't attach an onclick to an <option>. If it works in some browsers, you are lucky. It is not standard and doesn't work in all.

    You also should never start an ID with a numeric character. Though it should work using getElementById(), it can have other problems.

    So...

    Is this what you were after?
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showSome(sel)
    {
        var lastOne = parseInt(sel.options[sel.selectedIndex].text);
        for ( var i = 1; i <= 4; ++i )
        {
            document.getElementById("Test"+i).style.display = 
                i <= lastOne ? "block" : "none";
        }
    }
    </script>
    </head>
    <body>
    <form>
      <select name="select" onclick="showSome(this);">
        <option>0</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select><br>
    </form>
    <div id="Test1" style="display: none;">Test1</div>
    <div id="Test2" style="display: none;">Test2</div>
    <div id="Test3" style="display: none;">Test3</div>
    <div id="Test4" style="display: none;">Test4</div>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect!

    Thanks so much, I just really don't know too much about this, and was just trying to piece other code I found together.


  •  

    Posting Permissions

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