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

我有一个这个 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 内容也会更改。

Example http://jsfiddle.net/bsqVm/ http://jsfiddle.net/bsqVm/

EDIT:

谢谢你们的帮助

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

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

所以 JavaScript 是

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

or

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

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

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

http://jsfiddle.net/XCUDF/ http://jsfiddle.net/XCUDF/