jQuery实现下拉联动筛选表格右侧列不生效问题求助

问题原因 #

• 下拉框的data-attribute配置和表格行的自定义数据属性名称不对应，导致筛选选择器无法命中目标行
• 动物筛选下拉的选项value和表格内存储的动物属性值不匹配，没有对应值可筛选

修正后的完整代码 #

HTML部分

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<form name="Undergraduate Major Listing Options">
  <fieldset>
    <legend>Your Degree Options</legend>
    <div class="one-column">
      <span>
        <label class="searchforlabel" for="ddlDegree">Sport</label> 
        <span>
          <!-- 调整data-attribute为表格行对应的sports属性 -->
          <select class="ddlFilterTableRow" data-attribute="sports" id="ddlDegree" name="degree">
            <option value="">全部运动</option>
            <option value="Cricket">Cricket</option>
            <option value="Chess">Chess</option>
            <option value="Foot Ball">Foot Ball</option>
          </select>
        </span>
      </span> 
      <span>
        <label class="searchforlabel" for="ddlCollege">Animal</label> 
        <span>
          <!-- 调整data-attribute为表格行对应的animal属性 -->
          <select class="ddlFilterTableRow" data-attribute="animal" id="ddlCollege" name="college">
            <option value="">全部动物</option>
            <!-- 修正option的value和表格存储的属性值匹配 -->
            <option value="Cat">Cat</option>
            <option value="Dog">Dog</option>
          </select>
        </span>
      </span>
    </div>
  </fieldset>
</form>
<h1 id="headerCount"></h1>
<table id="tableRegisterKids">
  <tr>
    <th>Fullname</th>
    <th>Age</th>
    <th>Sport</th>
    <th>Favorite Animal</th>
  </tr>
  <tr class="Row" data-age="10" data-sports="Foot Ball" data-animal="Cat, Dog">
    <td>Thulasi Ram.S</td>
    <td>10</td>
    <td>Foot Ball</td>
    <td>Cat<br />Dog</td>
  </tr>
  <tr class="Row" data-age="8" data-sports="Cricket" data-animal="Cat">
    <td>Ram</td>
    <td>8</td>
    <td>Cricket</td>
    <td>Cat</td>
  </tr>
  <tr class="Row" data-age="6" data-sports="Chess"  data-animal="Dog">
    <td>Ram Kumar.S</td>
    <td>6</td>
    <td>Chess</td>
    <td>Dog</td>
  </tr>
  <tr class="Row" data-age="8" data-sports="Chess" data-animal="Cat">
    <td>Dinesh Kumar.S</td>
    <td>8</td>
    <td>Chess</td>
    <td>Cat</td>
  </tr>
  <tr class="Row" data-age="6" data-sports="Foot Ball" data-animal="Dog">
    <td>Raja Ram.S</td>
    <td>6</td>
    <td>Foot Ball</td>
    <td>Dog</td>
  </tr>
  <tr class="Row" data-age="10" data-sports="Chess" data-animal="Dog">
    <td>Priya</td>
    <td>10</td>
    <td>Chess</td>
    <td>Dog</td>
  </tr>
</table>

JS部分

$(document).ready(function () {
  // 初始化显示总人数
  $('#headerCount').html($('table#tableRegisterKids tr.Row:visible').length + ' Registered Kids');

  $('select.ddlFilterTableRow').on('change', function () {
    $('select.ddlFilterTableRow').attr('disabled', 'disabled');
    $('#tableRegisterKids').find('.Row').hide();
    
    var critriaAttribute = '';
    $('select.ddlFilterTableRow').each(function () {
      // 调整判断逻辑，值不为空就加入筛选条件
      if ($(this).val() != '') {
        critriaAttribute += '[data-' + $(this).data('attribute') + '*="' + $(this).val() + '"]';
      }
    });
      
    $('#tableRegisterKids').find('.Row' + critriaAttribute).show();
    $('#headerCount').html($('table#tableRegisterKids tr.Row:visible').length + ' Registered Kids');
    $('select.ddlFilterTableRow').removeAttr('disabled');
  });
});

CSS部分

td {
  padding:20px;
}

内容的提问来源于stack exchange，提问作者john