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

我试图根据与每行中的选定值相对应的显示过滤器来隐藏表行

显示过滤器

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

示例行

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

产品A
A类
B类
C类
产品B
A类
B类
C类

我会使用如下条件JavaScript：

如果值为show all，只需显示所有

并停止

如果没有，请检查表中的所有

.form控件
。
如果值匹配，则显示相应的

如果没有，就把它藏起来

代码：

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

$（函数（）{
$（'#displayFilter'）。更改（函数（）{
那=这个；
如果（this.value==0）
$（“表tr”）.show（）；
其他的
$（“table.form控件”）。每个（函数（）{
if（this.value==that.value）
$（this.closest（“tr”）.show（）；
其他的
$（this.closest（“tr”）.hide（）；
});
});
});

全部的
A类
B类
C类
产品A
A类
B类
C类
产品B
A类
B类
C类
或仅此（将类放在TRs上）：

与上类似。
ID
s不能包含重复的值<代码>：）

当然可以，但当我需要这样做时，我通常会喜欢

，这样ID就不会重复。请检查问题并尝试应用您的解决方案。附言：不是我的反对票。但我只是告诉你，这不适用！你的解决方案不起作用，兄弟。就像这样：兄弟，你是对的。。。但是您使用的是类而不是ID，对吗？所以这很好用。。。所以，如果您用类替换id，您的答案将是正确的。

$(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() {
    $('tr').hide(); // Hide all
    $('tr.' + this.val() ).show(); // Show only the TR you selected
  });
});