Question

我有一个表格，我想过滤未从多重选择中选择的行。

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

我想，当我从其中一个选择中选择（或取消选择）值时，它会过滤未选择值的行。

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

});

点击“工作签证”时，我希望只显示带有“工作签证”的行。但是，如果我点击金发，也只会显示工作签证和金色的行。

Answer 1

确定已选择选项的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元素和表格列，这也会有效。

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

Answer 2

您可以创建所选值的数组，隐藏所有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();
});

jquery从多个select中切换

2 个答案: