基于三个下拉框的HTML表格数据筛选JavaScript/JQuery问题

你当前的双下拉筛选逻辑在扩展到三个条件时，会因为嵌套的if-else导致判断逻辑冲突（比如多个条件的显示/隐藏操作互相覆盖），下面是重构后的代码，支持三个筛选条件，逻辑更清晰且易扩展：

<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 () {
        // 监听三个下拉框的change事件
        $("#ddlCountry,#ddlAge,#ddlGender").on("change", function () {
            // 获取三个下拉框的选中值并统一处理大小写
            var country = $('#ddlCountry').val().toUpperCase();
            var age = $('#ddlAge').val();
            var gender = $('#ddlGender').val().toUpperCase();
            SearchData(country, age, gender);
        });
    });

    function SearchData(country, age, gender) {
        // 先显示所有行，再逐个条件过滤
        $('#table11 tbody tr').show();

        // 过滤国家条件
        if (country !== 'ALL') {
            $('#table11 tbody tr').each(function() {
                var rowCountry = $.trim($(this).find('td:eq(1)').text()).toUpperCase();
                if (rowCountry !== country) {
                    $(this).hide();
                }
            });
        }

        // 过滤年龄条件（仅针对当前可见行）
        if (age !== 'ALL') {
            $('#table11 tbody tr:visible').each(function() {
                var rowAge = $.trim($(this).find('td:eq(2)').text());
                if (rowAge !== age) {
                    $(this).hide();
                }
            });
        }

        // 过滤性别条件（仅针对当前可见行）
        if (gender !== 'ALL') {
            $('#table11 tbody tr:visible').each(function() {
                // 假设性别对应表格第4列（索引3），请根据实际表格结构调整
                var rowGender = $.trim($(this).find('td:eq(3)').text()).toUpperCase();
                if (rowGender !== gender) {
                    $(this).hide();
                }
            });
        }
    }
</script>

关键优化说明： #

• 提前统一处理值的大小写，避免重复转换代码
• 采用「先显示所有，逐条件隐藏不符合项」的逻辑，彻底避免多条件嵌套的判断冲突
• 后续过滤仅针对当前可见行，提升筛选效率
• 逻辑模块化，新增第四个筛选条件只需添加对应判断块即可

注意事项： #

• 确认表格中性别列的索引是否为td:eq(3)（索引从0开始计数），若实际结构不同，需修改该索引值
• 下拉框的「全部」选项值需统一为ALL（代码已做大小写统一处理，不区分输入大小写）

内容的提问来源于stack exchange，提问作者AminCoD