如何在 jQuery 中过滤表格并获得多个结果

Question

我有一个带有两个下拉列表的简单表格，它们使用 jQuery 按各个行对表格进行排序。它将显示一个下拉结果或另一个。我希望它显示多个结果，例如类型和国家/地区。现在一次只显示一个。

<label for="filter">Type:</label>
<select id="filter">
  <option value="all">All Steps</option>
  <option value="standard">Standards</option>
  <option value="review">Reviews</option>
  <option value="inspection">Inspections</option>
  <option value="payment">Payments</option>
  <option value="document">Documents</option>
</select>
<label for="filter">Country:</label>
<select id="country-filter">
  <option value="all">All Steps</option>
  <option value="usa">USA</option>
  <option value="fra">Frabce</option>
  <option value="bha">Bahamas</option>
  
</select>

<table id="table">
  <tr id="one" class="row" data-type="standard">
    <td>Standard</td>
  </tr>
   <tr id="one" class="row" data-attr="usa">
    <td>USA</td>
  </tr>
  <tr id="two" class="row" data-type="review">
    <td>Review</td>
  </tr>
  <tr id="two" class="row" data-attr="fra">
    <td>France</td>
  </tr>
  <tr id="three" class="row" data-type="inspection">
    <td>Inspections</td>
  </tr>
  <tr id="three" class="row" data-attr="bha">
    <td>Bahamas</td>
  </tr>
  <tr id="four" class="row" data-type="payment">
    <td>Payments</td>
  </tr>
  <tr id="five" class="row" data-type="document">
    <td>Documents</td>
  </tr>
</table>

$("#filter").change(function() {
  console.clear();
  var filterValue = $(this).val();
  var row = $('.row');

  row.each(function(i, el) {
    if ($(el).attr('data-type') == filterValue) {
      row.hide()
      $(el).show();
    }
  });

// In Addition to Wlin's Answer (For "All" value)
  if ("all" == filterValue) {
    row.show();
  }

});

$("#country-filter").change(function() {
  console.clear();
  var countryfilterValue = $(this).val();
  var row = $('.row');

  row.each(function(i, el) {
    if ($(el).attr('data-attr') == countryfilterValue) {
      row.hide()
      $(el).show();
    }
  });

结果应该是在类型中选择的内容：下拉列表和在国家/地区选择的内容：下拉列表

标准 美国

Answer 1

您可以合并两个事件处理程序。然后，您可以在其中获取两个选择框的值并显示 data-attribute 值匹配的所需行。

演示代码：

$("select").change(function() {
  var filterValue = $("#filter").val(); //get select values..
  var countryfilterValue = $("#country-filter").val();
  $('.row').hide()
  //if nobody has all option slected
  if (filterValue != "all" && countryfilterValue != "all") {
    $("tr[data-type=" + filterValue + "]").show() //show row. datattr match
    $("tr[data-attr=" + countryfilterValue + "]").show()
  } else {
    $('.row').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<label for="filter">Type:</label>
<select id="filter">
  <option value="all">All Steps</option>
  <option value="standard">Standards</option>
  <option value="review">Reviews</option>
  <option value="inspection">Inspections</option>
  <option value="payment">Payments</option>
  <option value="document">Documents</option>
</select>
<label for="filter">Country:</label>
<select id="country-filter">
  <option value="all">All Steps</option>
  <option value="usa">USA</option>
  <option value="fra">Frabce</option>
  <option value="bha">Bahamas</option>

</select>

<table id="table">
  <tr id="one" class="row" data-type="standard">
    <td>Standard</td>
  </tr>
  <tr id="one" class="row" data-attr="usa">
    <td>USA</td>
  </tr>
  <tr id="two" class="row" data-type="review">
    <td>Review</td>
  </tr>
  <tr id="two" class="row" data-attr="fra">
    <td>France</td>
  </tr>
  <tr id="three" class="row" data-type="inspection">
    <td>Inspections</td>
  </tr>
  <tr id="three" class="row" data-attr="bha">
    <td>Bahamas</td>
  </tr>
  <tr id="four" class="row" data-type="payment">
    <td>Payments</td>
  </tr>
  <tr id="five" class="row" data-type="document">
    <td>Documents</td>
  </tr>
</table>