我有一个这个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内容也会更改。
示例https://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(); }); });
您的代码中有一个拼写错误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')更改$('.selectOtion') $('.selectOption')
我已经更新你的小提琴工作正常现在看看
试试这个： jsfiddle
自动呼叫事件通常是最简单的事情……
您可以添加此行以显示加载时的div：
$(function(){ $('#Analytics').show(); // Will show the div $('.selectOption').change(function(){ var selected = $(this).find(':selected').text(); //alert(selected); $(".desc").hide(); $('#' + selected).show(); }); });
这是DEMO
为了确保您始终显示正确的div，更好地为所有选项赋予价值，即使它与选项中的文本相同，因为如果您有多种语言，例如西class牙语中的“Analytics”将具有不同的文本。所以更好这样做：
需要了解更多jQuery教程分享根据选择的值显示和隐藏内容，都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
$(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 }); });
以上就是jQuery教程分享根据选择的值显示和隐藏内容相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/981017.html