show Hide DIV based on selection box options

**CurrentWave** · 02-26-2013 05:25 PM

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.

**JMRKER** · 02-26-2013 09:15 PM

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>

**s-p-n** · 02-27-2013 01:29 PM

I see you're using jQuery, try this fiddle:
http://jsfiddle.net/bbg7B/

**s-p-n** · 02-27-2013 01:42 PM

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)

**s-p-n** · 02-27-2013 01:43 PM

Whoops, forgot to include the link: http://jsfiddle.net/bbg7B/1/
On a side note, is there a way to edit on this forum?

**JMRKER** · 02-27-2013 02:26 PM

Originally Posted by s-p-n

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?

**s-p-n** · 02-27-2013 07:14 PM

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: show Hide DIV based on selection box options

Thread Tools

Display

show Hide DIV based on selection box options

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions