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

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