multiple select filter

by Sparrow Squire

HTML

<select id="airport-filter">
    <option value="LTN">Luton</option>
    <option value="LGW">Gatwick</option>
    <option value="EMA">East Midlands</option>
</select>

<select id="nights-filter">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select id="monthYear-filter">
    <option value="012015">01 2015</option>
    <option value="022015">02 2015</option>
    <option value="032015">03 2015</option>
</select>


<table class="price-table">
    <caption>Airport - XX Nights - XXX 20XX</caption>
    <thead>
        <tr>
            <th data-label=" &ndash; Prices from &pound;XX">Mon</th>
            <th data-label=" &ndash; Prices from &pound;XX">Tues</th>
            <th data-label=" &ndash; Prices from &pound;XX">Weds</th>
            <th data-label=" &ndash; Prices from &pound;XX">Thurs</th>
            <th data-label=" &ndash; Prices from &pound;XX">Fri</th>
            <th data-label=" &ndash; Prices from &pound;XX">Sat</th>
            <th data-label=" &ndash; Prices from &pound;XX">Sun</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="LTN1012015"> 
                <span data-label="Mon " class="date">XX XXX</span>
                <span class="deal-price">&pound;XXX</span>
            </td>
            <td class="LTN1012015"> 
                <span data-label="Tues " class="date">XX XXX</span>
                <span class="deal-price">&pound;XXX</span>
            </td>
            <td class="LTN1012015">
                <span data-label="Weds " class="date">XX XXX</span>
                <span class="deal-price">&pound;XXX</span>
            </td>
            <td class="LTN1012015">	
                <span data-label="Thurs " class="date">XX XXX</span>
                <span class="deal-price">&pound;XXX</span>
            </td>
            <td class="LTN1012015">	
                <span data-label="Fri " class="date">XX XXX</span>
	            <span...

CSS

td {border: 3px solid red}
td.LTN1012015 {background: teal}
td.LGW2022015 {background: purple}
td.EMA3032015 {background: lime}

JavaScript

$('#airport-filter, #nights-filter, #monthYear-filter').change(function(){
    
    var airport = $('#airport-filter :selected').val();
    var nights = $('#nights-filter :selected').val();
    var monthYear = $('#monthYear-filter :selected').val();


    var criteria = airport + nights + monthYear;
    
    //alert(criteria);
    
    $( ".price-table tbody td" ).each(function() {
       if (criteria != $(this).attr("class")){
           $(this).hide();
        } else {
        $(this).show();
        }    
        
    });
        
   
}).trigger('change');