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：

如果值显示为全部，则只显示所有<tr>并停止。
如果没有，请浏览表格中的所有.form-control。
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();
    });
  });
});

＆＃13;

$(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();
      });
  });
});

＆＃13;

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

＆＃13;

Answer 2

或者只是这个（把课程放在TR上）：

$(function () {
  $('#displayFilter').change(function() {
    $('tr').hide(); // Hide all
    $('tr.' + this.val() ).show(); // Show only the TR you selected
  });
});

喜欢this Fiddle。

jQuery - 隐藏所有没有选择值的行

2 个答案: