根据多个下拉选项隐藏/显示行（过滤）

所以我的问题是这个。 我有一个表，我隐藏/显示基于下拉菜单选择的行。 想要的是2个菜单一起工作而不是独立工作。 如果我在第一个下拉列表中选择一个项目，那么我希望能够使用第二个下拉列表进一步过滤该项目，依此类推以及任何其他下拉列表。 这是我正在使用的代码，目前独立工作。

 $(document).ready(function(){ $('select#age').bind('change',function(){ if($(this).val()=='Show All'){ $('td.age').parent().show(); }else{ $('td.age').parent().hide(); $('td.age:contains("'+$(this).val()+'")').parent().show(); } $('#counts').html( $('table.data_table tr:visible').length-1 + ' Registered Kids' ) }) $('select#sport').bind('change',function(){ if($(this).val()=='Show All'){ $('td.sport').parent().show(); }else{ $('td.sport').parent().hide(); $('td.sport:contains("'+$(this).val()+'")').parent().show(); } $('#counts').html( $('table.data_table tr:visible').length-1 + ' Registered Kids' ) }) })  

Answer 1

 String.prototype.replaceAll = function(search, replacement) { var target = this; return target.replace(new RegExp(search, 'g'), replacement); }; $(document).ready(function() { var ddlFilterTableRow = $('select.ddlFilterTableRow'), headerCount = $('#headerCount'); headerCount.html($('#tableRegisterKids').find('.Row').length + ' Registered Kids'); ddlFilterTableRow.on('change', function() { ddlFilterTableRow.attr('disabled', 'disabled'); var records = $('#tableRegisterKids').find('.Row'); records.hide(); var critriaAttributes = []; ddlFilterTableRow.each(function() { var $this = $(this), $selectedLength = $this.find(':selected').length, $critriaAttribute = ''; if ($selectedLength > 0 && $this.val() != '0') { if ($selectedLength == 1) { $critriaAttribute += '[data-' + $this.data('attribute') + '*="' + $this.val() + '"]'; } else { var $startDataAttribute = '[data-' + $this.data('attribute') + '*="', $endDataAttribute = '"]', $selectedValues = $this.val().toString(); $critriaAttribute += $startDataAttribute + $selectedValues.replaceAll(',', ($endDataAttribute + ',' + $startDataAttribute)) + $endDataAttribute; } critriaAttributes.push($critriaAttribute); } }); var $showRecords = records; if (critriaAttributes.length > 0) { $.each(critriaAttributes, function(i, filterValue) { $showRecords = $showRecords.filter(filterValue); }); } $showRecords.show(); headerCount.html($showRecords.length + ' Registered Kids'); ddlFilterTableRow.removeAttr('disabled'); }); }); 

// ================================================ ===== //

  Select All 10 8 6   Select All Foot Ball Chess Cricket  
 
 
 
Fullname
 
Age
 
Sport
 
 
 
Thulasiram.S
 
10
 
Foot Ball
 
 
 
ST Ram
 
8
 
Cricket
 
 
 
Ram Kumar.S
 
6
 
Chess
 
 
 
Dinesh Kumar.S
 
8
 
Chess
 
 
 
Raja Ram.S
 
6
 
Foot Ball
 
 
 
Priya
 
10
 
Chess
 
  

请找DEMO