Javascript 使用数据类型的带下拉框的jQuery筛选器

我需要使用带有jQuery的下拉框筛选表中的行。我不知道如何将选项的值与表行的数据类型关联起来

HTML:

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

我对jQuery还很陌生，所以什么都可以

---

这是代码笔：

您可以使用.val（）找到选择的值

您将获得所需的所有行，

.val（）

与

$（'.row'）匹配

循环所有的行当你找到一个匹配隐藏所有，然后才显示你想要的，b/c计算机这么快这样做似乎是瞬间的

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

现在你有了一个过滤器

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


$（“.filter”）.change（函数（）{
var filterValue=$（this.val（）；
变量行=$（'.row'）；
row.hide（）
每行（功能（i、el）{
if（$（el）.attr（'data-type'）==filterValue）{
$（el.show（）；
}
})
});

类型：
所有步骤
标准
评论
检查费
文件
标准
复习
检查
付款
文件
标准
复习
检查
付款
文件
您可以将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的答案外，请查看此操作。

用于下拉列表中的“全部”值


$（“#过滤器”）.change（函数（）{
console.clear（）；
var filterValue=$（this.val（）；
变量行=$（'.row'）；
每行（功能（i、el）{
if（$（el）.attr（'data-type'）==filterValue）{
row.hide（）
$（el.show（）；
}
});
//除了Wlin的回答（对于“所有”值）
如果（“全部”==filterValue）{
row.show（）；
}
});

类型：
所有步骤
标准
评论
检查
付款
文件
标准
复习
检查
付款
文件
除了一件事之外，这是有效的。如果我有另一行具有相同的数据类型，它只显示该类型的最后一行。我应用它的目的是在整个表中都有多个相同的数据类型。在不更改HTML的情况下，如何做到这一点？我无法使您的上次编辑生效。我忘了提到您需要将所有id更改为class，因为id不能重复。请参阅我如何将id=“filter”更改为class=“filter”，以及将id=“table”更改为id=“table1”，id=“table2”为什么要添加另一个表？请更新代码，以便能够显示具有相同类型值的多个项目，目前这只显示了一个。
.each(function(index, element) {});

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