jQuery переключение из нескольких множественный выбор

У меня есть таблица, и я хотел бы отфильтровать строку, которая не выбрана из множественного выбора.

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

Я хотел бы, когда я выбираю (или отменяю выбор) значения из одного из select, он фильтрует строки, где не выбраны значения.

<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>

Что я делал до сих пор 

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

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

});

При нажатии на кнопку " рабочая виза "я хочу, чтобы показывались только строки с" рабочей визой". Но если я нажму на блондинку тоже, то будет показана строка с рабочей визой и только блондин.

2 4
javascript jquery multiple-select

2 ответа:

Определите количество select элементов, которые имеют выбранные параметры: 

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

Скрыть все строки: 

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

Показывать только строки, в которых td s, соответствующие выбранным параметрам, равны числу в шаге 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>
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>
$('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();
});
1