I am new to JavaScript and JQuery and I want to filter data in the html table based on 3 dropdown list values (country, age and gender). --> ddlCountry, ddlAge, ddlGender
My below code is working fine to filter the table data by dropdown lists, but if I add a third dropdown list I have some problems.
This is my current code for 2 dropdown lists:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ddlCountry,#ddlAge").on("change", function () {
var country = $('#ddlCountry').find("option:selected").val();
var age = $('#ddlAge').find("option:selected").val();
SearchData(country, age)
});
});
function SearchData(country, age) {
if (country.toUpperCase() == 'ALL' && age.toUpperCase() == 'ALL') {
$('#table11 tbody tr').show();
} else {
$('#table11 tbody tr:has(td)').each(function () {
var rowCountry = $.trim($(this).find('td:eq(1)').text());
var rowAge = $.trim($(this).find('td:eq(2)').text());
if (country.toUpperCase() != 'ALL' && age.toUpperCase() != 'ALL') {
if (rowCountry.toUpperCase() == country.toUpperCase() && rowAge == age) {
$(this).show();
} else {
$(this).hide();
}
} else if ($(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(1)').text() != '') {
if (country != 'all') {
if (rowCountry.toUpperCase() == country.toUpperCase()) {
$(this).show();
} else {
$(this).hide();
}
}
if (age != 'all') {
if (rowAge == age) {
$(this).show();
}
else {
$(this).hide();
}
}
}
});
}
}
</script>
1条答案
按热度按时间rhfm7lfc1#