Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Hide and Unhide a div with a selectbox

  1. #1
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Hide and Unhide a div with a selectbox

    I want to unhide a div depending on the value of a selectbox option value

    HTML Code:
    <script type="text/javascript" language="JavaScript" src="subform.js"></script>
    
    <form name='template'>
    <select name='choise' onchange="javascript:ShowContent('value of option')">
    <option value="uniquename">uniquename</option>
    </select>
    </form>
    
    ----------- This is the way it does work only this is a link.
    <a 
       onmouseover="ShowContent('uniquename'); return true;"
       href="javascript:ShowContent('uniquename')">
    [show]
    </a>
    
    ----------------
    
    <div 
       id="uniquename" 
       style="display:none; 
          left:200px; 
          top:100px; 
          border-style: solid; 
          background-color: white; 
          padding: 5px;">
    
    Content goes here.
    
    </div>
    code in subform.js:

    HTML Code:
    function HideContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "block";
    }
    function ReverseContentDisplay(d) {
    if(d.length < 1) { return; }
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    as you can see i got some of the work done . However i dont know how to read the value in the onchance handeler. can sombody help me pleace.

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    However i dont know how to read the value in the onchance handeler. can sombody help me pleace.
    What value are you looking for? If it's being displayed or not?
    - Mike

  3. #3
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Okay, nevermind. I see.
    try this:
    Code:
    <form name='template'>
    <select name='choise' onchange="javascript:ShowContent(options[options.value.selectedIndex].value)">
    <option value="uniquename">uniquename</option>
    </select>
    </form>
    - Mike

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    You are going to need more than one option in the select to even have an onchange event. You might want to be showing and hiding more than one div as well.

    I don't think:

    Quote Originally Posted by mburt
    Code:
    [options.value.selectedIndex]
    has any value, though it might. Did you test it?

    Anyways, if you follow my idea of multiple divisions to show and hide with multiple options in the select, you could have something like so:

    Code:
    function show_hide(id, show){
    if(show)
    document.getElementById(id).style.display = "block";
    else
    document.getElementById(id).style.display = "none";
    }
    But, there seems to be no logical trigger for hiding the content later, after it has been revealed, if desired (this would depend upon personal preference of the designer). No allowance seems to have been made for non-javascript enabled browsers either. Here is a demo that works all of this out:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #container {
    width:350px;
    }
    </style>
    <script type="text/javascript">
    
    var disStyle=0
    var dom=document.getElementById||document.all
    
    function getItem(id) {
    return document.getElementById&&document.getElementById(id)? document.getElementById(id) : document.all&&document.all[id]? document.all[id] : null;
    }
    
    if(dom)
    document.write('<style type="text/css" id="dummy">\
    .tlink{\
    display:none;\
    }\
    <\/style>')
    
    if(dom&&typeof getItem('dummy').disabled=='boolean'){
    document.write('<style type="text/css" id="showhide">\
    .showhide{\
    display:none;\
    }\
    #cdiv0 {\
    display:block;\
    }\
    <\/style>');
    disStyle=1;
    }
    
    function displayOne(idPrefix, idNum){
    var i=0;
    while (getItem(idPrefix+i)!==null){
    getItem(idPrefix+i).style.display='none';
    i++;
    }
    if (typeof idNum!=='undefined')
    getItem(idPrefix+idNum).style.display='';
    }
    
    onload=function(){
    displayOne('cdiv', 0);
    if (disStyle)
    getItem('showhide').disabled=true;
    }
    </script>
    </head>
    <body>
    <select onchange="displayOne('cdiv', this.selectedIndex);">
    <option>See text</option>
    <option>See more text</option>
    <option>See something</option>
    <option>See hey</option>
    </select>
    <div id="container"><div class="showhide" id="cdiv0" name="cdiv0">Text Text Text Text Text Text Text Text Text Text Text <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
    <div class="showhide" id="cdiv1" name="cdiv1">More Text More Text More Text More <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
    <div class="showhide" id="cdiv2" name="cdiv2">Something Something Something Something Something Something Something <a class="tlink" href="#">[Top]</a><br>&nbsp;</div>
    <div class="showhide" id="cdiv3" name="cdiv3">Hey! Hey! Hey! Hey! <a class="tlink" href="#">[Top]</a><br>&nbsp;</div></div>
    
    </body>
    </html>
    But, as I say, the designer may have his/her own preferences.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default re

    to:mburt
    this doesnt work i dont get any javascript errors however the action is not preformed....

  6. #6
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default re

    thanks jhon your solution works

  7. #7
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John,
    That works perfectly. Any chance there's a quick tweak that will allow for show/hide of multiple div's from multiple select's?

    i.e.

    <select id="a">...</select>
    <div id="one">one</div>
    <div id="two">two</div>
    <div id="three">three</div>

    <select id="b">...</select>
    <div id="four">four</div>
    <div id="five">five</div>
    <div id="six">six</div>

    select "a" controls div's one, two and three

    select "b" controls div's four, five and six

    Thanks in advance.
    Ryan

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Just give them separate ID groups:
    Code:
    <select onchange="displayOne('cdiv', this.selectedIndex);">
      <!-- ... -->
    </select>
    
    <select onchange="displayOne('ddiv', this.selectedIndex);">
      <!-- ... -->
    </select>
    
    <div id="cdiv1"></div>
    <div id="cdiv2"></div>
    <div id="cdiv3"></div>
    
    <div id="ddiv1"></div>
    <div id="ddiv2"></div>
    <div id="ddiv3"></div>
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  9. #9
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    dang. that was easy.
    i really need to study some javascript!

    thanks Twey!
    Ryan

  10. #10
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Okay. One more question. The addition that Twey mentioned works great for the controls. When the page loads, however, all <div>'s are showing for the second select control.

    How do I make only one show?

    Thanks again, I really do appreciate it.

    Ryan

Bookmarks

Posting Permissions

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