javascript - 通过多选隐藏/显示表格行

Question

目前我正在使用 bootstrap-multiselect 插件处理过滤表。我很难让它正常工作。我想根据多选中的选定值显示/隐藏表行。例如。如果行的值为 Activated，则仅应显示具有激活值的行，其他行将被隐藏。如果我选择了 Activated 和 Deactivated，那么将显示值 Activated 和 Deactivated 的行。如果我选择All Selected，所有行都应该显示。在这里检查我的代码:

$('#custom-select').multiselect({
       includeSelectAllOption: true,
       onChange: function(option, checked) {

       var selected = [];

       $('#custom-select option:selected').each(function() {
           selected.push($(this).val());
       });

       console.log(selected);

       $.each(selected, function(i, val) {   

          $('#custom-table tr > td:not(:contains('+val+'))').closest('tr').hide();
          $('#custom-table tr > td:contains('+val+')').closest('tr').show();

       //console.log(val);
       });

       }
   });

我目前在 上的工作 jsfiddle .

Answer 1

您在每个循环中隐藏表行 tr。因此，上次循环运行时，它隐藏了它应该显示的行。在执行 show 之前将其从循环中取出并隐藏所有行。

$(document).ready(function() {

   $('#custom-select').multiselect({
       includeSelectAllOption: true,
       onChange: function(option, checked) {

           var selected = [];

           $('#custom-select option:selected').each(function() {
               selected.push($(this).val());
           });

           $('#custom-table tr').hide();  // <-----

           $.each(selected, function(i, val) {   
               $('#custom-table tr > td:contains('+val+')').closest('tr').show();
           });
       }
    });
});

jsFiddle