jQuery从多个选择中切换

奥鲁加里

我有一张表,我想过滤未从多选中选择的行。

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

});

当我单击“工作签证”时,我只希望显示带有“工作签证”的行。但是,如果我也单击“金发”,则将显示“工作签证和金发”行。

里克·希区柯克

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery-在切换中切换

来自分类Dev

在jQuery中切换AJAX响应

来自分类Dev

setTimeout在jQuery中切换

来自分类Dev

在jQuery中切换li

来自分类Dev

子类不在jQuery中切换

来自分类Dev

在 jquery 中切换颜色

来自分类Dev

在从任一列表中选择任何项目时,Jquery 从多个可选列表(当前选择除外)中切换所选项目

来自分类Dev

在jQuery或Javascript中切换按钮选择的大小写

来自分类Dev

使用案例选择条件在Java中切换案例

来自分类Dev

无法在输出选择中切换列

来自分类Dev

Android-在单个活动中切换多个布局

来自分类Dev

在引导程序中切换多个topmenu

来自分类Dev

如何避免在单个对象中切换多个条件?

来自分类Dev

在Netwire中切换

来自分类Dev

在Python中切换?

来自分类Dev

在Netwire中切换

来自分类Dev

在Python中切换?

来自分类Dev

如何在Jquery中切换动画

来自分类Dev

如何在jQuery中切换attr()

来自分类Dev

无法在jQuery中切换背景图片

来自分类Dev

如何在jQuery 2.0中切换动画?

来自分类Dev

在简单的jQuery Accordian中切换css样式

来自分类Dev

如何在jquery中切换子元素

来自分类Dev

jquery在表中切换背景颜色

来自分类Dev

如何在 jquery 中切换 div?

来自分类Dev

在 Jquery 中切换 - 无法按预期关闭菜单

来自分类Dev

在 jquery 文件中切换类和执行顺序

来自分类Dev

jQuery切换多个类

来自分类Dev

jQuery slide切换多个面板