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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript show hide divs onchange select menu

    Trying to get the divs to switch style properties when selected form select menu. Any help would be great!

    Code:
    <script type="text/javascript">
    function showstuff(element){
            if(document.getElementById(element).style.display = 'block')
                      {
                            document.getElementById(have).style.visibility="block";
                            document.getElementById(look).style.visibility="none";
                      }
            else if(document.getElementById(element).style.visibility = 'block')
                      {
                            document.getElementById(look).style.visibility="block";
                            document.getElementById(have).style.visibility="none";
                      }
    }
    </script>
    
    <select name="type" onchange="showstuff(this.value);">
              <option value="look">Look</option>
              <option value="have">Have</option>
    </select>
    <div id="have" style="display:block;">Have</div>
    <div id="look" style="display:none;">Look</div>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Too complex.
    Code:
    <script type="text/javascript">
    function showstuff(element){
        document.getElementById("have").style.visibility = element=="have"?"block":"none";
        document.getElementById("look").style.visibility = element=="look"?"block":"none";
    }
    </script>
    
    <select name="type" onchange="showstuff(this.value);">
              <option value="look">Look</option>
              <option value="have" selected>Have</option>
    </select>
    <div id="have" style="display:block;">Have</div>
    <div id="look" style="display:none;">Look</div>
    Note that you were missing the "..." around "look" and "have" in document.getElementById.
    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.

  • Users who have thanked Old Pedant for this post:

    low tech (03-18-2011)

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks for getting back to me. That still doesn't quite work, it just hides one div but doesnt open another.

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    838
    Thanks
    172
    Thanked 90 Times in 90 Posts
    Hi

    change both 'visibility' to 'display'

    eg
    document.getElementById("have").style.visibility

    document.getElementById("have").style.display

    LT
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #5
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Low Tech,

    Yeh i spotted that the first time, but still have the same issue.

    Any advice would be great.

    Thanks

  • #6
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    838
    Thanks
    172
    Thanked 90 Times in 90 Posts
    Hi

    No idea --- it works fine for me in IE8 and FireFox

    this is what I Have


    PHP Code:
    <!doctype html>
    <
    html>
    <
    head>
    <
    title>TEST TEMPLATE</title>
    </
    head>
    <
    body>
    <
    script type="text/javascript">
    function 
    showstuff(element){
        
    document.getElementById("have").style.display element=="have"?"block":"none";
        
    document.getElementById("look").style.display element=="look"?"block":"none";
    }
    </script>
    <select name="type" onchange="showstuff(this.value);">
              <option value="look">Look</option>
              <option value="have" selected>Have</option>
    </select>
    <div id="have" style="display:block;">Have</div>
    <div id="look" style="display:none;">Look</div>
    </body>
    </html> 
    LT
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #7
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    works great thanks low tech.

  • #8
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    838
    Thanks
    172
    Thanked 90 Times in 90 Posts
    Hi

    Glad it's working for you:-)

    Actually it's Old Pedant's code and thanks should be credited to him which i've done via the 'thank user for this helpful post' button.

    LT
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.


  •  

    Posting Permissions

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