1

最近の質問: jQuery 選択メニューで同じ ID の兄弟を表示し、他の兄弟を非表示にする

選択メニューオプションの値を使用してリスト項目を表示/非表示にできるようにしました: http://jsfiddle.net/Z3Qgz/

2 番目の選択メニューを追加する場合、表示されるリスト項目が両方のメニューで選択された値を表すように、2 つの選択メニューをリンクするにはどうすればよいですか?

$(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/

たとえば、「Landscape」と「CMYK」を選択すると、クラスが「Landscape CMYK」のリスト項目のみが表示されます。

4

1 に答える 1

2

他の 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/

于 2012-12-18T04:52:25.100 に答える