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,