jquery 切换多个 select

Question

我有一个 table，我想从多个 select.

中筛选出不是 select 的行

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

我想，当我 select（或 unselect）来自 select 之一的值时，它会过滤未 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>

到目前为止我做了什么

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

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

});

当单击 "Working Visa" 时，我希望只显示带有 "Working Visa" 的行。但是如果我也点击 Blond，只会显示工作签证和 Blond 行。

Answer 1

您可以创建所选值的数组，隐藏所有 tr 元素，然后根据它们是否包含所选值过滤 tr 元素并显示包含的元素。

Example Here

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

如果您想处理可以选择多个值的实例：

Example Here

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

Answer 2

确定 select 个选择了选项的元素的数量：

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

隐藏所有行：

  $('#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 元素和 table 列，这仍然有效。

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

jquery 切换多个 select

jquery toggle from several multiple select

javascript

jquery

multiple-select