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

Question

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,

Answer 1

this is the simplest way to hide an element: $('.target').hide();

and here is an example of show and hide: div { background:#def3ca; margin:3px; width:80px; display:none; float:left; text-align:center; }

Show Hide

Hello 3, how are you? $("#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); });

Answer 2

simplier:

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

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

Answer 3

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"

Answer 4

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();
});

Answer 5

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();
});