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>

CodePudding user response：

<select id="ddlCountry">
    <option value="All">All</option>
    <option value="Greece">Greece</option>
    <option value="Germany">Germany</option>
</select>

<br>

<select id="ddlAge">
    <option value="All">All</option>
    <option value="18">18</option>
    <option value="23">23</option>
</select>

<br>

<select id="ddlGender">
    <option value="All">All</option>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
</select>

<br>

<table id="table11">
    <thead>
        <tr>
            <th>Entry Code</th>
            <th>Country</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>Greece</td>
            <td>18</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Germany</td>
            <td>23</td>
            <td>Male</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Greece</td>
            <td>29</td>
            <td>Female</td>
        </tr>
    </tbody>
</table>

<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,#ddlGender").on("change", function () {
            var country = $('#ddlCountry').find("option:selected").val();
            var age = $('#ddlAge').find("option:selected").val();
            var gender = $('#ddlGender').find("option:selected").val();
            SearchData(country, age, gender)
        });
    });
    function SearchData(country, age, gender) {
        if (country.toUpperCase() == 'ALL' && age.toUpperCase() == 'ALL' && gender.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());
                var rowGender = $.trim($(this).find('td:eq(3)').text());
                if (country.toUpperCase() != 'ALL' && age.toUpperCase() != 'ALL' && gender.toUpperCase() != 'ALL') {
                    if (rowCountry.toUpperCase() == country.toUpperCase() && rowAge == age && rowGender == gender) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                } else if ($(this).find('td:eq(1)').text() != '' || $(this).find('td:eq(2)').text() != '' || $(this).find('td:eq(3)').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();
                        }
                    }
                    if (gender != 'All') {
                        if (rowGender == gender) {
                            $(this).show();
                        }
                        else {
                            $(this).hide();
                        }
                    }
                }

            });
        }
    }
</script>