Javascript 基于多个下拉选择隐藏/显示行（筛选）

所以我的问题是。我有一个表，我根据下拉菜单选择隐藏/显示行。我们希望两个菜单一起工作，而不是独立工作。如果我在第一个下拉列表中选择了一个项目，我希望能够在第二个下拉列表中进一步过滤该项目，然后在任何其他下拉列表中进行过滤。下面是我目前正在使用的独立工作的代码

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

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

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

---

请查找

您是否也可以发布数据片段表…您是在寻找表中的实际数据片段还是生成表本身的代码。对不起，我好像在键盘前睡着了。您需要这样的输出吗？我如何更新此输出以在数据属性中的逗号分隔列表上进行筛选？如果数据sports=Chess，Cricket，我从下拉列表中选择Cricket或Chess，我希望这是结果的一部分。@Theeag:请替换为下面的代码critriaAttribute+='[data-'+$this.data'attribute'+'*='+$this.val+']@Theeag:请使用演示链接查找更新的答案。@Theeag:此脚本可用于下拉列表中的单选和多选。对于下拉列表中的多个选择，请添加两个附加属性，multiple=multiple size=3演示：

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