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();
});