Question

My recent question: jQuery select menu show siblings with same ID hide other siblings

Allowed me to show/hide list items using select menu option values: http://jsfiddle.net/Z3Qgz/

If I add a second select menu, how can I link the two select menus together so that the list items displayed, represent the values selected in both menus?

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

E.g. Selecting “Landscape” and “CMYK” will display only list items that have a class “Landscape CMYK”.

Answer 1

You can add 2 other classes to the elements and use class selector, this way there is no need to use if/else statements.

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