www.webdeveloper.com
Results 1 to 7 of 7

Thread: show Hide DIV based on selection box options

  1. #1
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    33

    show Hide DIV based on selection box options

    Hello all ~ I have a script that worked great until I wanted to change from a check-box to a selection-options. I have no errors per say it just doesn't 'work'.

    Here's what I want to have happen: in my selection drop down list the first will be a default value, if the visitor selects any of the other choices I want my text surrounded by <div id= to appear, otherwise if the default is their choice then the text can remain hidden.

    Here is my code that worked when I was using a check box -

    Code:
    <script type="text/javascript">
    $(function() {
      $('#user_input').change(function() {
        $('#use_user_input').val($(this).val());
      });
    });
    
    function showhidefield(element, id)
    {
      var node = document.getElementById(id);
    
      if (node) {
        node.style.display = element.checked ? 'block' : 'none';
      }
    }
    </script>

    HTML Code:
    <form>
    <input type="checkbox" name="choose" onclick="showhidefield(this, 'hideablearea')"> Please send me more info. <br>
          
    <div id="hideablearea" style="display:none;">
    		  <p>This is the area to display when they checked the box</p>
    </div>
    But now I need it to work for a selection - like this:

    HTML Code:
    <select name="choose" onChange="showhidefield(this, 'hideablearea')">
    <option selected="selected" value="">Anything is good to me.</option> 
    <option value="m1">Veggies</option>
    <option value="w2">Fruit</option>
    <option value="y3">Meat</option>
    </select>
    What do I need to change so that all the options besides the default will cause my text to appear?

    I've searched and searched but haven't found my exact problem.
    Thanks for your help.

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

    Lightbulb

    I am unclear from your description as to what it is you are trying to do, so this is just a SWAG.
    Ignore or modify as desired.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title> Untitled </title>
    <style type="text/css">
    #fieldSelection { background-color:yellow; height:100px; width:200px; border:1px solid blue; }
    </style>
    
    </head>
    <body>
    <select id="choose" onChange="showField(this.selectedIndex)">
     <option value="">Anything is good to me.</option> 
     <option value="m1">Veggies</option>
     <option value="w2">Fruit</option>
     <option value="y3">Meat</option>
    </select>
    <p>
    <div id="fieldSelection">Anything is good for me.</div>
    
    <script type="text/javascript">
    function showField(info) {
      document.getElementById('fieldSelection').innerHTML = document.getElementById('choose').options[info].text;
    }
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Feb 2013
    Posts
    46
    I see you're using jQuery, try this fiddle:
    http://jsfiddle.net/bbg7B/

  4. #4
    Join Date
    Feb 2013
    Posts
    46
    Also, with a few additions to the above script you can do some pretty cool things. Note that I used classes so we can include multiple select menus simply by using the same class. Additionally, I added special value replacement- {all} and {none} are replaced by either a list of all normal results or a single white-space character (for display purposes- just basically to show u some of the things you can do with this)

  5. #5
    Join Date
    Feb 2013
    Posts
    46
    Whoops, forgot to include the link: http://jsfiddle.net/bbg7B/1/
    On a side note, is there a way to edit on this forum?

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    Quote Originally Posted by s-p-n View Post
    Whoops, forgot to include the link: http://jsfiddle.net/bbg7B/1/
    On a side note, is there a way to edit on this forum?
    Nothing happens when I click on the link display.
    Is there something extra I'm supposed to do to see it in action?

  7. #7
    Join Date
    Feb 2013
    Posts
    46
    Here is the embed version, http://jsfiddle.net/bbg7B/1/embedded/result/
    I don't know what you mean, I don't see a link 'display' but if you are seeing what I see when I click the link, there is 4 boxes on the page. The bottom-right box is the result. You can change the code and press ctrl+enter or click 'Run' to update the 'result' box. In my code I didn't use any link 'display'

Thread Information

Users Browsing this Thread

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

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