jQuery:显示选择下拉列表中的元素，选择其他选项时隐藏它

Question

我尝试环顾四周，也有类似的问题，但我的问题更简单，但是，我在这些论坛中找不到解决方案。

在学习 jQuery 时，我尝试在选择下拉列表中的项目/选项时显示 DIV，并在选择下拉列表中的任何其他选项时隐藏相同的 DIV。

选择 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:

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

当选择选择菜单中的任何其他选项时，上面的 DIV 不应可见。

我尝试过这个 jQuery，但它当然不能正常工作:

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

如果您能给我任何帮助，我将不胜感激。

谢谢

Answer 1

我明白你想用 View map 做什么。简化为:

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