CODEWITHSUNDEEP
jqueryselect
Ricardo Zea
Ricardo Zea

Reputation: 10282

jQuery: show an element from select drop down, hide it when other option selected

I've tried looking around and there are similar problems, but mine is way more simple, but yet, I can't find a solution within these forums.

While learning jQuery, I'm trying to show a DIV when an item/option from a select drop down is selected, and hide that same DIV when any other option in the select drop down is selected.

select HTML:

<select name="source" id="source">
  <option value="null" selected="selected">&mdash;Select&mdash;</option>
  <option value="s1">Source 1</option>
  <option value="s2">Source 2</option>
  <option value="sother">Other</option>
</select>

DIV I need to show when 'Other' is selected:

<div id="specify-source">Other source here...</div>

When any other option in the select menu is selected, the above DIV shouldn't be visible.

I've tried this jQuery but of course it doesn't work properly:

$(function() {  
 $.viewMap = {
  'sother' : $('#specify-source')
   };    
   $('#source').change(function() {
  // hide all
  $.each($.viewMap, function() { this.hide(); });
  // show current
  $.viewMap[$(this).val()].show();
   });
});

Any help you can give me, I'd greatly appreciate it.

Thanks,

Upvotes: 9

Views: 13893

Answers (5)

regina
regina

Reputation: 1

This is the simplest way to hide an element:

$('.target').hide();

And here is an example of show and hide jquery: 

<!DOCTYPE html>
 <html>
 <head>
<style>
div { background:#def3ca; margin:3px; width:80px; 
display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<button id="showr">Show</button>
 <button id="hidr">Hide</button>
 <div>Hello 3,</div>

 <div>how</div>
 <div>are</div>
 <div>you?</div>
 <script>
 $("#showr").click(function () {
 $("div:eq(0)").show("fast", function () {
/* use callee so don't have to name the function */
$(this).next("div").show("fast", arguments.callee);
});
});
$("#hidr").click(function () {
$("div").hide(2000);
});

 </script>
</body>
</html>

Upvotes: 0

Ricardo Zea
Ricardo Zea

Reputation: 10282

I forgot to mention that the DIV I need to display when the 'Other' option was selected, needed to be hidden upon entering the page, so I added the .hide(); property.

I also added a slideDown('fast'); to help with usability.

Here's my final code thanks to Amit's help:

$('#specify-source').hide();
$('#source').change(function() {
($(this).val() == "sother") ? 
$('#specify-source').slideDown('fast') : $('#specify-source').hide();
});

Upvotes: 0

Merritt
Merritt

Reputation: 2341

Ignoring your view map, here you go:

$("#source").change(function () {  
  var foo = false;
  $("#source option:selected").each(function () {  if ($(this).val() == "sother") foo = true; });
  if (foo) $('#specify-source').show(); else $('#specify-source').hide();
}).change();

Do you want me to include how to with all your code?

Other posted methods will work as well, but won't work with but won't handle a select with @multiple="multiple"

Upvotes: 0

Amit
Amit

Reputation: 392

I see what you're trying to do with the view map. Simplify it with:

$('#source').change(function() {
    ($(this).val() == "sother") ? $('#specify-source').show() : $('#specify-source').hide();
});

Upvotes: 20

Glennular
Glennular

Reputation: 18225

simplier:

$(function() {  
$("#specify-source").hide();

$("#source").change(function(){
    if ($(this).val() == "sother")
        $("#specify-source").show();
    else
        $("#specify-source").hide();
    });
});

Upvotes: 0

Related Questions