Jquery switches from multiple multiple select

Question

I have a table, and I would like to filter a row that is not selected from multiple selection.

<table id="myTable">
   <tr>
      <td>Working Visa</td>
      <td>Blond</td>
   </tr>
   <tr>
      <td>Student Visa</td>
      <td>Brown</td>
   </tr>
</table>

I would like, when I select (or deselect) values ​​from one of them, it filters the rows where no values ​​are selected.

<select class="select" multiple>
   <option value="Working Visa"></option>
   <option value="Student Visa"></option>
</select>
<select class="select" multiple>
   <option value="Blond"></option>
   <option value="Brown"></option>
</select>

What have i done so far

$("select.select").change( function() {

    $(this).each(function() {
        var valeurs = $(this).val();
        //console.log(valeurs);
        $("#MyTable tr").show();
        $("td").not("td."+valeurs).parent("tr").hide();
    });

});

When you click on "Work Visa", I want to show only lines with a "work visa". But if I click on the blonde too, they will show a line with a work visa and a blonde.

Answer 1

Determine the number of items selectthat selected options:

var num= $('select.select').has('option:selected').length;

Hide all lines:

  $('#myTable tr').hide();

, td, , 1.

  $('#myTable tr').each(function() {
    if(num === $(this).find('td').filter(function() {
                  return $('option:selected:contains("'+$(this).text()+'")').length;
               }).length
      ) {
      $(this).show();
    }
  });

, select .

$('select.select').change(function() {
  var num= $('select.select').has('option:selected').length;

  $('#myTable tr').hide();
  
  $('#myTable tr').each(function() {
    if(num === $(this).find('td').filter(function() {
                  return $('option:selected:contains("'+$(this).text()+'")').length;
               }).length
      ) {
      $(this).show();
    }
  });
});

#myTable tr {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select" multiple>
   <option value="Working Visa">Working Visa</option>
   <option value="Student Visa">Student Visa</option>
</select>
<select class="select" multiple size="5">
   <option value="Blond">Blond</option>
   <option value="Black">Black</option>
   <option value="Brown">Brown</option>
   <option value="Auburn">Auburn</option>
</select>

<table id="myTable">
   <tr>
      <td>Working Visa</td>
      <td>Blond</td>
   </tr>
   <tr>
      <td>Working Visa</td>
      <td>Black</td>
   </tr>
   <tr>
      <td>Student Visa</td>
      <td>Brown</td>
   </tr>
   <tr>
      <td>Student Visa</td>
      <td>Auburn</td>
   </tr>
</table>

Hide result

Answer 2

, tr tr , , .

$('select').on('change', function() {
  var selectedValues = $('select option:selected').map(function() {
    return this.value;
  }).get();

  $('table tr').hide().filter(function() {
    var self = this,
      containsValue = true;

    selectedValues.forEach(function(value) {
      if (!$(self).find('td:contains(' + value + ')').length) {
        containsValue = false;
      }
    });

    return containsValue;
  }).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Working Visa</td>
    <td>Blond</td>
  </tr>
  <tr>
    <td>Student Visa</td>
    <td>Brown</td>
  </tr>
  <tr>
    <td>Working Visa</td>
    <td>Brown</td>
  </tr>
  <tr>
    <td>Student Visa</td>
    <td>Blond</td>
  </tr>
</table>
<select class="select" multiple>
  <option value="Working Visa">Working Visa</option>
  <option value="Student Visa">Student Visa</option>
</select>
<select class="select" multiple>
  <option value="Blond">Blond</option>
  <option value="Brown">Brown</option>
</select>

Hide result

$('select').on('change', function() {
  var selectedValues = $('select option:selected').map(function() {
    return this.value;
  }).get();

  $('table tr').hide().filter(function() {
    var self = this,
      containsValue = true;

    selectedValues.forEach(function(value) {
      if (!$(self).find('td:contains(' + value + ')').length) {
        containsValue = false;
      }
    });

    return containsValue;
  }).show();
});

, :

$('select').on('change', function() {
  var selectedValues = $('select:has(option:selected)').map(function() {
    return [$(this).find('option:selected').map(function() {
      return this.value;
    }).get()];
  }).get();

  $('table tr').hide().filter(function() {
    var self = this,
        containsValue = true;

    selectedValues.forEach(function(valueArray) {
      var hasAtLeastOne = false;

      valueArray.forEach(function(value) {
        if ($(self).find('td:contains(' + value + ')').length) {
          hasAtLeastOne = true;
        }
      });

      containsValue = hasAtLeastOne;
    });

    return containsValue;
  }).show();
});