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

我有一个这个Html代码

 Analytics Translation Poll  
 
Analytics
 
Translation
 
Poll
 
​ 

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上触发更改事件为’undefined’解决方案

所以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')更改$('.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(); }); }); 

这是DEMO

Answer 5

为了确保您始终显示正确的div，更好地为所有选项赋予价值，即使它与选项中的文本相同，因为如果您有多种语言，例如西class牙语中的“Analytics”将具有不同的文本。所以更好这样做：

  Analytics Translation Poll  $(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 }); });