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/

Answer 2

您的代码中有错字

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

更改$('.selectOtion')为$('.selectOption')

我已经更新了你的小提琴工作正常现在看看

http://jsfiddle.net/bsqVm/4/

Answer 3

试试这个：jsfiddle

自动呼叫事件通常是最简单的事情......

Answer 4

您可以添加此行以显示加载时的 div：

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

这是演示

Answer 5

为了确保您始终显示正确的 div，最好为所有选项赋予价值，即使它与选项中的文本相同，因为如果您有多种语言，例如西班牙语的“分析”会有不同的文本。所以更好让它像这样：

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

$(function(){
      $('#Analytics').show(); // Will show the div
      $('.selectOption').change(function(){
        var selected = $(this).val(); //may store it in a variable
        //alert(selected);
        $(".desc").hide();
        //$('#'+selected).show();
        $('#' + $(this).val()).show(); //or u can just use obj value in selector to save coding
      });
});