jQuery两个选择菜单按类显示/隐藏列表项
我最近的问题是: 允许我使用“选择”菜单选项值显示/隐藏列表项: 如果添加第二个选择菜单,如何将两个选择菜单链接在一起,以便显示的列表项表示在两个菜单中选择的值jQuery两个选择菜单按类显示/隐藏列表项,jquery,select,show-hide,siblings,Jquery,Select,Show Hide,Siblings,我最近的问题是: 允许我使用“选择”菜单选项值显示/隐藏列表项: 如果添加第二个选择菜单,如何将两个选择菜单链接在一起,以便显示的列表项表示在两个菜单中选择的值 $(function() { var $li = $('.levelThree').find('li') $("#orientation").change(function() { if (this.value == 'all') { $li.show(); }
$(function() {
var $li = $('.levelThree').find('li')
$("#orientation").change(function() {
if (this.value == 'all') {
$li.show();
}
else {
$li.hide().filter("." + this.value).show();
}
}).change();
});
$(function() {
var $li = $('.levelThree').find('li')
$("#colours").change(function() {
if (this.value == 'all') {
$li.show();
}
else {
$li.hide().filter("." + this.value).show();
}
}).change();
});
例如,选择“横向”和“CMYK”将仅显示具有类“横向CMYK”的列表项。您可以向元素添加另外两个类并使用类选择器,这样就不需要使用if/else语句
<select id="orientation">
<option value="all-orientations">All</option>
...
</select>
<select id="colours">
<option value="all-colours">All</option>
<option value="CMYK">CMYK</option>
...
</select>
<!-- the DIVs -->
<ul class="levelThree">
<li class="Landscape CMYK all-colours all-orientations"><p>Landscape CMYK</p></li>
<li class="Landscape RGB all-colours all-orientations"><p>Landscape RGB</p></li>
<li class="Landscape PMS all-colours all-orientations"><p>Landscape PMS</p></li>
...
</ul>
再次感谢@undefined Your的帮助。干杯
$(function() {
var $li = $('.levelThree').find('li')
$("#orientation, #colours").change(function() {
var a = $("#orientation").val();
var b = $("#colours").val();
$li.hide().filter("." + a + "." + b).show();
}).change();
});