jQuery: show an element from select drop down, hide it when other option selected
- by Ricardo Zea
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">—Select—</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,
