通過multiselect隱藏/顯示表格行

Question

目前我正在使用bootstrap-multiselect插件處理過濾表。 我很難讓它正常工作。 我想根據multiselect中的選定值顯示/隱藏表格行。 例如，如果row的值為Activated ，則只顯示具有激活值的行，其他行將被隱藏。 如果我選擇了“已激活”和“ 已停用”，則將顯示“ 已 激活”和“ 已激活”值的行。 如果我選擇了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