Multi-Filter Div show/hide

by Preston Badeer

HTML

<select id="filter1">
    <option value="reset" selected="selected">No filter</option>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
</select>
<select id="filter2">
    <option value="reset" selected="selected">No filter</option>
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
</select>
<div data-filter1="value1" data-filter2="value1"><strong>filter1: value1 - filter2: value1</strong>Lucas ipsum dolor sit amet anakin organa calrissian dooku mustafar dooku hutt darth organa gonk. Sebulba yoda hutt palpatine solo endor hutt darth. Yavin jinn chewbacca fett kashyyyk naboo dagobah. Sidious leia obi-wan lobot anakin. Solo solo grievous windu coruscant. K-3po naboo mara moff zabrak yoda darth chewbacca darth. Grievous gonk luke chewbacca darth zabrak solo organa. Hutt yoda watto tatooine antilles darth antilles. Binks maul mothma coruscant kessel. Lando wicket palpatine jade darth.</div>
<div data-filter1="value2" data-filter2="value1"><strong>filter1: value2 - filter2: value1</strong>Organa ewok skywalker tusken raider biggs dooku jinn kenobi. Wedge mace hutt thrawn. Fett solo leia chewbacca qui-gon darth zabrak solo biggs. Wedge jango organa darth ackbar. Mon tusken raider solo organa darth skywalker kenobi naboo.</div>
<div data-filter1="value2" data-filter2="value2"><strong>filter1: value2 - filter2: value2</strong>Darth darth skywalker jar darth darth. Lars luke hoth chewbacca coruscant. Amidala kessel windu kit. Darth hutt wedge bespin. Darth skywalker dantooine lando. Ventress darth darth boba solo kenobi yavin. Watto yavin hutt palpatine.</div>
<div data-filter1="value1" data-filter2="value3"><strong>filter1: value1 - filter2: value3</strong>Maul darth skywalker wookiee wedge jade darth c-3po k-3po. Darth skywalker solo vader skywalker lando fett grievous. Lando boba luke dagobah yoda. Organa skywalker darth hoth antilles maul. Skywalker...

CSS

div {
    border: 1px solid black;
    margin: 1em 0;
}

JavaScript

// Wait until document is "ready" (finished loading) before running js
$(document).ready(function () {

    // Run the code inside here when #filter1 or #filter2 change values
    $('#filter1, #filter2').on('change', function () {
        // Store the values of each filter in variables
        var filter1 = $('#filter1').val();
        var filter2 = $('#filter2').val();

        // If both filters have values, reset the divs and show divs with those values
        if (filter1 != 'reset' && filter2 != 'reset') {
            $('div').hide();
            $('[data-filter1="' + filter1 + '"][data-filter2="' + filter2 + '"]').show();
        }
        // If only filter1 has a value, reset the divs and show divs with that value
        else if (filter1 != 'reset') {
            $('div').hide();
            $('[data-filter1="' + filter1 + '"]').show();
        }
        // If only filter2 has a value, reset the divs and show divs with that value
        else if (filter2 != 'reset') {
            $('div').hide();
            $('[data-filter2="' + filter2 + '"]').show();
        }
        // If both filters have "reset" value, reset and show all
        else {
            $('div').hide().show();
        }
    });

});