Hide / show table row through multiselect

Question

I am currently working on a filter table using the bootstrap-multiselect plugin. I have a hard time for it to work correctly. I want to show / hide the table row depending on the selected values ​​in multiselect. For instance. If the string has the value Activated , then only the string with the activated value should be displayed, while others will be hidden. If I selected Activate and Deactivate, a line with the values Activated and Deactivated will be displayed . If I selected All Selected , the entire row should be displayed. Here is my code:

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

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