javascript - jQuery - 隐藏所有未选择值的行

Question

我尝试根据与每行中所选值相对应的显示过滤器隐藏表格行。

显示过滤器

<select class="form-control" id="displayFilter">
  <option value="0" selected>all</option>
  <option value="1">Category A</option>
  <option value="2">Category B</option>
  <option value="3">Category C</option> 
</select>

我能够在更改时获取新值:

$('#displayFilter').change(function () {
  console.log("Filter changed to: " + this.value);        
});

示例行

<tr data-id="1">
  <td>Product A</td>
  <td>
    <select class="form-control">
      <option value="1" selected>Category A</option>
      <option value="2">Category B</option>
      <option value="3">Category C</option>
    </select>
  </td>
</tr>

<tr data-id="2">
  <td>Product B</td>
  <td>
    <select class="form-control">
      <option value="1">Category A</option>
      <option value="2" selected>Category B</option>
      <option value="3">Category C</option>
    </select>
  </td>
</tr>

Answer 1

我会使用这样的条件 JavaScript:

1. 如果值为show all，则仅显示所有<tr> s并停止。
2. 如果没有，请检查所有 .form-control table 里面。
   1. 如果值匹配，则显示相应的<tr> .
   2. 如果没有，请将其隐藏。

代码:

$(function () {
  $('#displayFilter').change(function () {
    that = this;
    if (this.value == 0)
      $("tr").show();
    else
    $("table .form-control").each(function () {
      if (this.value == that.value)
        $(this).closest("tr").show();
      else
        $(this).closest("tr").hide();
    });
  });
});

$(function () {
  $('#displayFilter').change(function () {
    that = this;
    if (this.value == 0)
      $("table tr").show();
    else
      $("table .form-control").each(function () {
        if (this.value == that.value)
          $(this).closest("tr").show();
        else
          $(this).closest("tr").hide();
      });
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<select class="form-control" id="displayFilter">
  <option value="0" selected>all</option>
  <option value="1">Category A</option>
  <option value="2">Category B</option>
  <option value="3">Category C</option> 
</select>
<table>
  <tbody>
    <tr data-id="1">
      <td>Product A</td>
      <td>
        <select class="form-control">
          <option value="1" selected>Category A</option>
          <option value="2">Category B</option>
          <option value="3">Category C</option>
        </select>
      </td>
    </tr>
    <tr data-id="2">
      <td>Product B</td>
      <td>
        <select class="form-control">
          <option value="1">Category A</option>
          <option value="2" selected>Category B</option>
          <option value="3">Category C</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>