Hide/Show rows based on multiple dropdown selections (filtering)

问题

So my question is this. I have a table and I am hiding/showing rows based on a dropdown menu selection. What would like to have is the 2 menus working together rather than independently. If I select an item in the first dropdown, I would like to be able then to filter that item further with the second dropdown and so on with any additional dropdown. Here's the code I'm using that works independently currently.

    <script>
$(document).ready(function(){
 $('select#age').bind('change',function(){
  if($(this).val()=='Show All'){
   $('td.age').parent().show();
  }else{
   $('td.age').parent().hide();
   $('td.age:contains("'+$(this).val()+'")').parent().show();
  }
  $('#counts').html( $('table.data_table tr:visible').length-1 + ' Registered Kids' )    
 })
  $('select#sport').bind('change',function(){
  if($(this).val()=='Show All'){
   $('td.sport').parent().show();
  }else{
   $('td.sport').parent().hide();
   $('td.sport:contains("'+$(this).val()+'")').parent().show();
  }
  $('#counts').html( $('table.data_table tr:visible').length-1 + ' Registered Kids' )    
 })
})
</script>

回答1:

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};

$(document).ready(function() {
    var ddlFilterTableRow = $('select.ddlFilterTableRow'),
        headerCount = $('#headerCount');
          headerCount.html($('#tableRegisterKids').find('.Row').length + ' Registered Kids');

    ddlFilterTableRow.on('change', function() {
        ddlFilterTableRow.attr('disabled', 'disabled');

        var records = $('#tableRegisterKids').find('.Row');
        records.hide();

        var critriaAttributes = [];
        ddlFilterTableRow.each(function() {
            var $this = $(this),
                $selectedLength = $this.find(':selected').length,
                $critriaAttribute = '';

            if ($selectedLength > 0 && $this.val() != '0') {
                if ($selectedLength == 1) {
                    $critriaAttribute += '[data-' + $this.data('attribute') + '*="' + $this.val() + '"]';
                } else {
                    var $startDataAttribute = '[data-' + $this.data('attribute') + '*="',
                        $endDataAttribute = '"]',
                        $selectedValues = $this.val().toString();

                    $critriaAttribute += $startDataAttribute + $selectedValues.replaceAll(',', ($endDataAttribute + ',' + $startDataAttribute)) + $endDataAttribute;
                }
                critriaAttributes.push($critriaAttribute);
            }
        });

        var $showRecords = records;
        if (critriaAttributes.length > 0) {
            $.each(critriaAttributes, function(i, filterValue) {
                $showRecords = $showRecords.filter(filterValue);
            });
        }
        $showRecords.show();

        headerCount.html($showRecords.length + ' Registered Kids');

        ddlFilterTableRow.removeAttr('disabled');
    });
});

//================================================================//

<select id="ddlAge" class="ddlFilterTableRow" data-attribute="age">
    <option value="0">Select All</option>
    <option value="10">10</option>
    <option value="8">8</option>
    <option value="6">6</option>
</select>
<select id="ddlSport" class="ddlFilterTableRow" data-attribute="sports">
    <option value="0">Select All</option>
    <option value="Foot Ball">Foot Ball</option>
    <option value="Chess">Chess</option>
    <option value="Cricket">Cricket</option>
</select>
<h1 id="headerCount"></h1>
<table id="tableRegisterKids">
    <tr>
        <th>Fullname</th>
        <th>Age</th>
        <th>Sport</th>
    </tr>
    <tr class="Row" data-age="10" data-sports="Foot Ball">
        <td>Thulasiram.S</td>
        <td>10</td>
        <td>Foot Ball</td>
    </tr>
    <tr class="Row" data-age="8" data-sports="Cricket">
        <td>ST Ram</td>
        <td>8</td>
        <td>Cricket</td>
    </tr>
    <tr class="Row" data-age="6" data-sports="Chess">
        <td>Ram Kumar.S</td>
        <td>6</td>
        <td>Chess</td>
    </tr>
    <tr class="Row" data-age="8" data-sports="Chess">
        <td>Dinesh Kumar.S</td>
        <td>8</td>
        <td>Chess</td>
    </tr>
    <tr class="Row" data-age="6" data-sports="Foot Ball">
        <td>Raja Ram.S</td>
        <td>6</td>
        <td>Foot Ball</td>
    </tr>
    <tr class="Row" data-age="10" data-sports="Chess">
        <td>Priya</td>
        <td>10</td>
        <td>Chess</td>
    </tr>
</table>

Please find for DEMO

来源：https://stackoverflow.com/questions/14209680/hide-show-rows-based-on-multiple-dropdown-selections-filtering