jQuery 两个选择菜单按类显示/隐藏列表项答案

【问题标题】：jQuery two select menus show/hide list item by classjQuery 两个选择菜单按类显示/隐藏列表项
【发布时间】：2012-12-05 05:38:21
【问题描述】：

我最近的问题：jQuery select menu show siblings with same ID hide other siblings

允许我使用选择菜单选项值显示/隐藏列表项：http://jsfiddle.net/Z3Qgz/

如果我添加第二个选择菜单，如何将两个选择菜单链接在一起，以便显示的列表项代表两个菜单中选择的值？

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

http://jsfiddle.net/dRqRV/2/

例如选择“横向”和“CMYK”将仅显示具有“横向 CMYK”类的列表项。

【问题讨论】：

标签： jquery select show-hide siblings

【解决方案1】：

您可以在元素中添加 2 个其他类并使用类选择器，这样就不需要使用 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>

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

http://jsfiddle.net/3jRQq/

【讨论】：

再次@undefined 非常感谢您的帮助。干杯！