www.webdeveloper.com
Results 1 to 4 of 4

Thread: Div to appear based on dropdown selection

  1. #1
    Join Date
    Aug 2010
    Posts
    34

    Div to appear based on dropdown selection

    Code:
    <div id="1">
    <asp:DropDownList  ID="DD1" runat="server">
             <asp:ListItem>option1</asp:ListItem>
             <asp:ListItem>option2</asp:ListItem>
    </asp:DropDownList>
    </div>
    
    <div id="option2show">
    OPTION 2 Content.
    <div>
    My question is, I want the div with the id of "option2show" to be hidden unless the user has selected option 2 in the dropdown box.

    If the user has selected option 1 then nothing will happen, however iff option 2 has been selected then the option2 div will appeaar. I would like this to happen before any submit buttons are press, so i guess onblur of the dropdown box.


    Any ideas?

    Many thanks

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb Something to consider...

    I don't know what 'asp' is , but if you want a JS solution from the JS forum, then try this...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=249581
    
    function $_(IDS) { return document.getElementById(IDS); }
    
    function toggle(Info) {
      var CState = $_(Info);
      if (CState.style.display != "block") { CState.style.display = "block"; }
                                      else { CState.style.display = "none"; }
    }
    
    function SBoxAction(info) { // alert(info);
      if (info == 2) { toggle('option2show'); }
      $_('SBox').selectedIndex = 0;
    }
    </script>
    
    </head>
    <body>
    <div id="1">
    <select id="SBox" onchange="SBoxAction(this.selectedIndex)">
     <option>Select</option>
     <option>option1</option>
     <option>option2</option>
    </select>
    </div>
    <p>
    <div id="option1show">OPTION 1 Content.<div>
    <p>
    <div id="option2show" style="display:none">OPTION 2 Content.<div>
    </body>
    </html>

  3. #3
    Join Date
    Aug 2010
    Posts
    34
    Thank you for your reply,

    I have got this coe to work, however I would also like it to behave in a way that when the user selects option 1 after selecting option 2 the box then dissapears.

    Is this possible?

    Thanks

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb

    Quote Originally Posted by amean_n View Post
    Thank you for your reply,

    I have got this coe to work, however I would also like it to behave in a way that when the user selects option 1 after selecting option 2 the box then dissapears.

    Is this possible?

    Thanks
    That was not in the original request. It is possible, but it is best if you think through what you want before you ask for it.

    Code:
    function SBoxAction(info) { // alert(info);
      $_('option2show').style.display = 'none';
    
      if (info == 2) { toggle('option2show'); }
    // can remove 'toggle()' function if following used instead of above
    //  if (info == 2) { $_('option2show').style.display = 'block'; }
    
      $_('SBox').selectedIndex = 0;
    }
    Untested, but should be close...
    Last edited by JMRKER; 08-03-2011 at 08:08 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles