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 id="ddlAge" class="ddlFilterTableRow" data-attribute="age">
<option value="0">Select All</option>
<option value="10">10</option>
<option value="8">8</option>
<option value="6">6</option>
</select>
<select id="ddlSport" class="ddlFilterTableRow" data-attribute="sports">
<option value="0">Select All</option>
<option value="Foot Ball">Foot Ball</option>
<option value="Chess">Chess</option>
<option value="Cricket">Cricket</option>
</select>
<h1 id="headerCount"></h1>
<table id="tableRegisterKids">
<tr>
<th>Fullname</th>
<th>Age</th>
<th>Sport</th>
</tr>
<tr class="Row" data-age="10" data-sports="Foot Ball">
<td>Thulasiram.S</td>
<td>10</td>
<td>Foot Ball</td>
</tr>
<tr class="Row" data-age="8" data-sports="Cricket">
<td>ST Ram</td>
<td>8</td>
<td>Cricket</td>
</tr>
<tr class="Row" data-age="6" data-sports="Chess">
<td>Ram Kumar.S</td>
<td>6</td>
<td>Chess</td>
</tr>
<tr class="Row" data-age="8" data-sports="Chess">
<td>Dinesh Kumar.S</td>
<td>8</td>
<td>Chess</td>
</tr>
<tr class="Row" data-age="6" data-sports="Foot Ball">
<td>Raja Ram.S</td>
<td>6</td>
<td>Foot Ball</td>
</tr>
<tr class="Row" data-age="10" data-sports="Chess">
<td>Priya</td>
<td>10</td>
<td>Chess</td>
</tr>
</table>
请找DEMO