jQuery DataTable双select下拉筛选无法同时生效如何解决

你当前调用的fnFilter默认是全局筛选接口，每次调用都会覆盖之前已设置的全局筛选规则，因此选中第二个下拉框时，第一个下拉设置的筛选条件会被直接替换；同时你未给筛选方法指定对应列索引，两个下拉的筛选逻辑全部作用在全局搜索上，无法实现多列独立条件的联合匹配。
另外你的下拉控件id和实际筛选项不匹配：id为age的下拉选项是Tokyo、Edinburgh，实际对应的是表格的Office（办公地点）列，和Age年龄列无关，后续建议修正id语义避免维护混淆。

使用DataTable提供的列级筛选API，给两个筛选条件分别绑定对应的数据列，任意下拉值变化时，同时读取两个下拉的选中值，分别应用到对应列的筛选规则后重绘表格，两个条件会自动以「逻辑与」的关系联合生效。
你的表格列从左到右对应索引（从0开始计数）如下：

• Name：0
• Position：1
• Office：2
• Age：3
• Start date：4
• Salary：5

替换你原来的JS逻辑即可，HTML部分无需改动（如果要语义化可以把id=age的下拉改成id=office，同步修改JS里的选择器即可）：

<script>
$(document).ready(function () {
    // 初始化DataTable，拿到API实例
    var table = $('#example').DataTable();

    // 绑定两个下拉的change事件
    $('#age, #position').on('change', function () {
        // 读取两个下拉的当前选中值
        const officeFilter = $('#age').val();
        const positionFilter = $('#position').val();

        // 分别给对应列应用筛选，最后调用draw重绘表格
        table
            .column(2) // 对应Office列，匹配你id=age下拉的选项
            .search(officeFilter)
            .column(1) // 对应Position列，匹配职位下拉的选项
            .search(positionFilter)
            .draw();
    });
});
</script>

• 上述代码默认支持不区分大小写的模糊匹配，如果需要精确匹配，给search方法传入第二个精确匹配参数即可，写法为.search(筛选值, true)。
• 修复后两个筛选条件独立存储，不会出现后选条件覆盖前序规则的问题，可实现多维度联合筛选。
  

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