Jquery 展览及展览；基于选择值隐藏内容

我有一个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>​

Js

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

范例

编辑：

谢谢你们的帮助

首先，我的代码中有一个输入错误，所以“selectOtion”应该是“selectOption”

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

所以javascript是

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

或

---

您的代码中有输入错误

selectOtion

应该是

selectOption

。要根据所选值显示div，可以在DOMReady上触发更改事件

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

---

您的代码中有一个输入错误

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

将

$（'.selectOtion'）

更改为

$（'.selectOption'）

我已经更新了你的小提琴，现在可以看了

试试这个：

---

自动调用事件通常是最简单的操作…

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

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

---

以下是

以确保始终显示正确的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
      });
});

分析
翻译
投票
$（函数（）{
$（“#分析”）.show（）；//将显示div
$（'.selectOption'）.change（函数（）{
var selected=$（this）.val（）；//可以将其存储在变量中
//警报（选定）；
$（“.desc”）.hide（）；
//$（'#'+选中）。显示（）；
$（'#'+$（this.val（））.show（）；//或者您可以只使用选择器中的obj值来保存编码
});
});

很抱歉输入错误，谢谢rahulThsnks，我错过了自动调用事件

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

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

<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
      });
});