jquery - 根据选择值显示和隐藏内容

Question

我有一个这个 Html 代码

<select class="selectOption">
    <option>Analytics</option>
    <option>Translation</option>
    <option>Poll</option>
</select>

<div id="changingArea">
    <div id="Analytics" class="desc">Analytics</div>
    <div id="Translation" class="desc">Translation</div>
    <div id="Poll" class="desc">Poll</div>
</div>​

CSS

.desc {display: none;}​

JS

$(function(){
      $('.selectOtion').change(function(){
        var selected = $(this).find(':selected').text();
        $(".desc").hide();
         $('#' + selected).show();
      });
});

现在的问题是所有 div 元素在页面加载时都隐藏了。我想默认显示第一个选项值，更改时 div 内容也会更改。

示例 http://jsfiddle.net/bsqVm/

编辑:

谢谢大家的帮助

首先，我的代码中有一个拼写错误，因此“selectOtion”应该是“selectOption”

第二步进行默认选择以显示我们可以在 DOMReady 上触发更改事件作​​为“未定义”解决方案

所以 JavaScript 是

$(function(){
      $('.selectOption').change(function(){
        var selected = $(this).find(':selected').text();
        //alert(selected);
        $(".desc").hide();
         $('#' + selected).show();
      }).change()
 });

或

 $(function(){
  $('#Analytics').show(); // Will show the div
  $('.selectOption').change(function(){
    var selected = $(this).find(':selected').text();
    //alert(selected);
    $(".desc").hide();
    $('#' + selected).show();
  });
 });

Answer 1

您的代码中有一个拼写错误 selectOtion 应该是 selectOption。要根据所选值显示 div，您可以触发 DOMReady 上的更改事件。

$(function(){
     $('.selectOption').change(function(){
         var selected = $(this).find(':selected').text();
         $(".desc").hide();
         $('#' + selected).show();
     }).change()
});

http://jsfiddle.net/XCUDF/