根据选择选项jquery显示/隐藏div [英] show/hide div based on select option jquery
本文介绍了根据选择选项jquery显示/隐藏div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的代码。为什么它不起作用?
< Script>
$('#colorselector')。change(function(){
$('。colors')。hide();
$('#'+ $(this).val ())。show();
});
< / Script>
< Select id =colorselector>
< option value =red>红色< / option>
< option value =yellow>黄色< / option>
< option value =blue>蓝色< / option>
< /选择>
< div id =redclass =colorsstyle =display:none> ....< / div>
< div id =yellowclass =colorsstyle =display:none> ...< / div>
< div id =blueclass =colorsstyle =display:none> ...< / div>
解决方案
您在DOM加载前运行代码。
试试这个:
现场示例:
$(function(){//确保包含的代码不会运行,直到
//所有的DOM元素都加载
'('#colorselector')。change(function(){
$('。colors')。hide();
$('#'+ $(this ).val())。show();
});
});
Here is my code. Why it doesn't work?
<Script>
$('#colorselector').change(function() {
$('.colors').hide();
$('#' + $(this).val()).show();
});
</Script>
<Select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> .... </div>
<div id="yellow" class="colors" style="display:none"> ... </div>
<div id="blue" class="colors" style="display:none"> ... </div>
解决方案
You're running the code before the DOM is loaded.
Try this:
Live example:
$(function() { // Makes sure the code contained doesn't run until
// all the DOM elements have loaded
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
这篇关于根据选择选项jquery显示/隐藏div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文