複数のドロップダウン選択に基づいて行を非表示/表示する（フィルタリング）

Question

これは私の質問です。テーブルがあり、ドロップダウンメニューの選択に基づいて行を隠している/表示しています。 2つのメニューは独立しているのではなく一緒に働いています。最初のドロップダウンで項目を選択した場合、その項目を2番目のドロップダウンなどでさらにフィルタリングしたい場合は、それ以降のドロップダウンを追加することができます。私が使用しているコードは現在独立しています。

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

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

DEMO