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

我看到你要对视图进行的操作.简化它:

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