桌上的多个过滤器不要过度骑行但要重叠

Question

你一直都很好帮助sp谢谢大家。这是我的问题。

我在这里有一个有效的例子：

https://plnkr.co/edit/hvYzwoxMUQq1Z3veFagT?p=preview

你可以看到第一个选择过滤我的表在第二列，第二个选择过滤我的表在第四列。我的问题是他们互相骑行。例如，如果我首先选择＆＃34; John＆＃34;在第一个选择..表格将显示3约翰...但当我然后选择＆＃34; apple＆＃34;在第二个选择中它会告诉我所有4个人用苹果作为水果......我希望它能用苹果来展示2个约翰。

$(document).ready(function($) {


$('#mySelector_f_name').change( function(){
  var selection = $(this).val();
  $('table')[selection? 'show' : 'hide']();

  if (selection) {
    $.each($('#myTable tbody tr'), function(index, item) {
      $(item)[$(item).find('td:nth-child(2)').is(':contains('+ selection  +')')? 'show' : 'hide']();
    });
  }

});
});

$(document).ready(function($) {


$('#mySelector_fruit').change( function(){
  var selection = $(this).val();
  $('table')[selection? 'show' : 'hide']();

  if (selection) {
    $.each($('#myTable tbody tr'), function(index, item) {
      $(item)[$(item).find('td:nth-child(4)').is(':contains('+ selection  +')')? 'show' : 'hide']();
    });
  }

});

}）;

Answer 1

你可以这样做

https://plnkr.co/edit/cjH45e7nTcHWraxv6xHo?p=preview

$(document).ready(function($) {


    $('#mySelector_f_name').change( function(){
      var selection = $(this).val(),
          anotherDropdownSelect = $('#mySelector_fruit').val();

      $('table')[selection? 'show' : 'hide']();

      if (selection) {
        $.each($('#myTable tbody tr'), function(index, item) {
          var isShowOrHide = $(item).find('td:nth-child(2)').is(':contains('+ selection  +')') &&
                             (anotherDropdownSelect ? $(item).find('td:nth-child(4)').is(':contains('+ anotherDropdownSelect  +')') : true);
          $(item)[isShowOrHide ? 'show' : 'hide']();
        });
      }
    });
});

$(document).ready(function($) {


    $('#mySelector_fruit').change( function(){
      var selection = $(this).val(),
          anotherDropdownSelect = $('#mySelector_f_name').val();

      $('table')[selection? 'show' : 'hide']();

      if (selection) {
        $.each($('#myTable tbody tr'), function(index, item) {
          var isShowOrHide = $(item).find('td:nth-child(4)').is(':contains('+ selection  +')') &&
                             (anotherDropdownSelect ? $(item).find('td:nth-child(2)').is(':contains('+ anotherDropdownSelect  +')') : true);
          $(item)[isShowOrHide? 'show' : 'hide']();
        });
      }

    });
});

我做的是，拿另一个变量来寻找另一个下拉列表，并使用组合，我显示结果

<强>更新

处理此类情况的最佳方法是禁用该选项，以便用户无法选择

<option value="" selected disabled>Please Select</option>

但是如果你想要选择它并做过滤，那么你可以做这样的事情