我有一个正在运行的脚本,它根据所选的下拉选项显示/隐藏div。
在用户在下拉列表中进行选择之前,我需要隐藏除第一个div之外的所有div。
根据下面的脚本,如何从除第一个选项之外的所有选项中获取值,这样我可以隐藏除第一个div之外的所有div?
$('.dd-show-hide').find('option:not(:first)').val().hide();
$('.dd-show-hide').change(function(){
$(this).find('option').each(function(){
$('#' + this.value).hide();
});
$('#' + this.value).show();
});
<select class="dd-show-hide">
<option>Choose</option>
<option value="div1">Show Div 1</option>
<option value="div2">Show Div 2</option>
</select>
<div id="div1" class="drop-down-show-hide">div 1</div>
<div id="div2" class="drop-down-show-hide">div 2</div>
答案 0 :(得分:3)
您可以使用first
选择器和not
方法:
$('.drop-down-show-hide').not(':first').hide();
或触发更改事件,无需使用each
方法。
var $divs = $('.drop-down-show-hide');
$('.dd-show-hide').change(function(){
$divs.hide().filter('[id='+this.value+']').show();
}).change();
答案 1 :(得分:0)
一般来说,当我必须在JQuery中“隐藏除 _ 之外的所有东西”时,我发现将它们全部隐藏起来更方便,然后显示我想要的那个。这隐藏了除第一个之外的所有内容:
$('.drop-down-show-hide').hide().first().show();
此隐藏基于当前选择的选项:
$('.drop-down-show-hide').hide().filter('#' + $('.dd-show-hide').val()).show();
这基于第一个选项隐藏(即使不一定是现在选择的选项)
$('.drop-down-show-hide').hide().filter('#'+$('.dd-show-hide option:first').val()).show()
您无需逐个查看ID。仅显示下拉列表中选定的一个并隐藏其他内容:
$('.dd-show-hide').change(function() {
$('.drop-down-show-hide').hide().filter('#' + this.value).show();
});
答案 2 :(得分:0)
试试这个。你几乎拥有它:
$('.dd-show-hide').find('option').each(function(){
if ('div1' != this.value) {
$('#' + this.value).hide();
} else {
$('#' + this.value).show();
}
});