how can we filter data in html table based on multiple dropdown list values(ie BASED ON COUNTRY And age in below table ) using jquery
i want to filter data in the html table based on 2 dropdown list values.(one is country and second is age).
<table style="width:100%" id=table11>
<tr>
<th>name</th>
<th>country</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>USA</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>UK</td>
<td>50</td>
</tr>
<tr>
<td>John</td>
<td>INDIA</td>
<td>80</td>
</tr>
<tr>
<td>sam</td>
<td>AUSTRALIA</td>
<td>80</td>
</tr>
<tr>
<td>joe</td>
<td>INDIA</td>
<td>60</td>
</tr>
<tr>
<td>alan</td>
<td>USA</td>
<td>60</td>
</tr>
</table>
<select class="cl_country" data-attribute="class">
<option value="all">Select Class </option>
<option value="India">india</option>
<option value="usa">usa</option>
<option value="uk">uk</option>
</select>
<select class="cl_age" data-attribute="class">
<option value="all">Select Class </option>
<option value="50">50</option>
<option value="60">60</option>
<option value="80">80</option>
</select>
$(document).ready(function () {
$(".cl_country").on("change", function () {
searchterm = $(this).val();
$('#table11 tbody tr').each(function () {
var sel = $(this);
var txt = sel.find('td:eq(1)').text();
if (searchterm != 'all') {
if (txt.indexOf(searchterm) === -1) {
$(this).hide();
}
else {
$(this).show();
}
}
else
{
$('#table11 tbody tr').show();
}
});
});
$(".cl_age").on("change", function () {
searchterm = $(this).val();
$('#table11 tbody tr').each(function () {
var sel = $(this);
var txt = sel.find('td:eq(2)').text();
if (searchterm != 'all') {
if (txt.indexOf(searchterm) === -1) {
$(this).hide();
}
else {
$(this).show();
}
}
else
{
$('#table11 tbody tr').show();
}
});
});
});
here i have 2 dropdownlist. its working/filtering data in table when used alone but i want to filter data in table based on the value in both dropdownlists(country and age) ie when the value in one dropdown list(either country or age) is selected the table gets filtered and filter the remaining data(ie filtered result by the first dropdownlist) in the table with the second dropdownlist selection