hide/show table row via multiselect

Question

Currently I'm working on filtering table using bootstrap-multiselect plugin. I'm having hard time to make it work properly. I want to show/hide table row depending on selected values in multiselect. Eg If row has a value of Activated , then only row with activated value should be shown and others will be hidden. If I selected Activated and Deactivated then row with values Activated and Deactivated will be shown. If I selected All Selected , all row should shown. Checked my code here:

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

       }
   });

My current work on jsfiddle .

Answer 1

You are hiding table rows tr inside each loop. So, last time the loop runs, it hides the rows which it was supposed to show. Take that out of the loop and hide all the rows before performing 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