多Dropdown组合筛选表格失效问题求助（附jQuery代码）

问题根源在于你当前的代码应该是单独处理每个下拉框的筛选，每次只应用当前选中的单个条件，覆盖了之前的筛选结果，导致只有最后一次选择的条件生效。要实现多条件组合筛选，需要每次筛选时同时校验所有下拉框的选中值，步骤如下：

• 把所有下拉框的筛选逻辑统一到一个函数里，不管哪个下拉框变动，都触发这个函数重新筛选
• 筛选时逐一检查每行数据是否满足所有已选择的条件，未选择的下拉框不参与判断
• 根据全条件匹配结果决定表格行的显示/隐藏

示例代码 #

假设你的下拉框ID分别为#date-select、#month-select、#year-select、#timezone-select，表格行在tbody下，每行的对应数据存在<td>的data-*属性中（比如data-date、data-month等），可以用以下代码：

// 统一执行筛选的函数
function filterTable() {
    // 获取所有下拉框的选中值
    const selectedDate = $('#date-select').val().trim();
    const selectedMonth = $('#month-select').val().trim();
    const selectedYear = $('#year-select').val().trim();
    const selectedTimezone = $('#timezone-select').val().trim();

    // 遍历每一行表格数据
    $('tbody tr').each(function() {
        const $row = $(this);
        // 从行内获取对应的数据（根据你的实际结构调整）
        const rowDate = $row.find('td').data('date');
        const rowMonth = $row.find('td').data('month');
        const rowYear = $row.find('td').data('year');
        const rowTimezone = $row.find('td').data('timezone');

        // 校验所有有效条件
        let isMatch = true;
        if (selectedDate && rowDate !== selectedDate) isMatch = false;
        if (selectedMonth && rowMonth !== selectedMonth) isMatch = false;
        if (selectedYear && rowYear !== selectedYear) isMatch = false;
        if (selectedTimezone && rowTimezone !== selectedTimezone) isMatch = false;

        // 显示或隐藏当前行
        $row.toggle(isMatch);
    });
}

// 给所有下拉框绑定change事件，触发筛选
$('#date-select, #month-select, #year-select, #timezone-select').on('change', filterTable);

适配调整 #

如果你的表格数据是在列文本里（比如日期在第1列），可以把获取行数据的部分改成：

const rowDate = $row.find('td:eq(0)').text().trim(); // 索引0对应第一列
const rowMonth = $row.find('td:eq(1)').text().trim();
const rowYear = $row.find('td:eq(2)').text().trim();
const rowTimezone = $row.find('td:eq(3)').text().trim();

这样每次任何一个下拉框变动，都会重新校验所有条件，只有满足所有已选条件的行才会显示，实现组合筛选的效果。

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