jQuery 过滤器，带有使用数据类型的下拉框

jQuery filter with drop down box using data-type

本文关键字：数据类型 过滤器 jQuery      更新时间：2023-09-26

我需要使用带有jQuery的下拉框过滤表的行。我不知道该怎么做的是如何将选项的值与表行的数据类型相关联。

.HTML：

<label for="filter">Type:</label>
<select id="filter>
    <option value="all">All Steps</option>
    <option value="standard">Standards</option>
    <option value="review">Reviews</option>
</select>
<table id="table>
    <tr id="one" class="row" data-type="standard">
        <td>Standard</td>
    </tr>
    <tr id="one" class="row" data-type="review">
        <td>Reviews</td>
    </tr>
</table>

.JS：

$("#filter").change(function () {
$("#table").find(data-type).each(function () {
    if ($(this).text() != $("#filter").val()) 
        $(this).hide();
    else 
        $(this).parent().show();
    if ($("#filter").val() == "all") 
        $(this).show();
    });
});

这里的jQuery只是根据我迄今为止通过研究发现的内容拼凑而成的。将数据类型属性保留在表行中非常重要。

我对jQuery很陌生，所以任何事情都有帮助！

下面是代码笔：http://codepen.io/aburnsworth/pen/XKzgqa?editors=1111

您可以使用.val();找到选择的值

您将获得该.val()与$('.row');匹配所需的所有行

当你

找到匹配项时循环所有行隐藏所有，然后才显示你想要的，b/c电脑做这个这么快似乎瞬间 

.each(function(index, element) {});

现在你有一个过滤器

编辑：只需将隐藏全部移动到循环之外即可。 

$(".filter").change(function() {
    var filterValue = $(this).val();
    var row = $('.row'); 
      
    row.hide()
    row.each(function(i, el) {
         if($(el).attr('data-type') == filterValue) {
             $(el).show();
         }
    })
     
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="filter">Type:</label>
<select class="filter" data-tableId="table1">
  <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>
<table id="table1">
  <tr id="one" class="row" data-type="standard">
    <td>Standard</td>
  </tr>
  <tr id="two"  class="row" data-type="review">
    <td>Review</td>
  </tr>
  <tr id="three" class="row" data-type="inspection">
    <td>Inspections</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>
   <tr id="one" class="row" data-type="standard">
    <td>Standard</td>
  </tr>
  <tr id="two"  class="row" data-type="review">
    <td>Review</td>
  </tr>
  <tr id="three" class="row" data-type="inspection">
    <td>Inspections</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>
</table>

您可以将 js 函数修改为 

$(document).ready(function() {
       var $rows = $('table tr');
       $("#filter").change(function() {
           var val = '^(?=.*''b' + $.trim($(this).val()).split(/'s+/).join('''b)(?=.*''b') + ').*$',
               reg = RegExp(val, 'i'),
               text;
           if ($(this).val() !== 'all') {
               $rows.show().filter(function() {
                   text = $(this).data('type').replace(/'s+/g, ' ');
                   return !reg.test(text);
               }).hide();
           } else {
               $rows.show();
           }
       });
   });

请看这个工作小提琴。

除了@wlin的答案对于下拉列表中的"全部"值。

$("#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();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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>
<table id="table">
  <tr id="one" class="row" data-type="standard">
    <td>Standard</td>
  </tr>
  <tr id="two" class="row" data-type="review">
    <td>Review</td>
  </tr>
  <tr id="three" class="row" data-type="inspection">
    <td>Inspections</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>

相关文章：