如何使用DataTables获取多选下拉框的多个选中ID

我看你遇到的问题是用jQuery Multiselect插件实现的多选下拉框，在DataTables搜索时只能拿到单个选中ID对吧？这是因为你用的$("#EventCategoryDDL option:selected").val()只会返回第一个选中项的值，没办法获取所有选中的选项。下面给你两种可行的解决方法：

方法一：利用Multiselect插件自带的API获取选中值 #

jQuery Multiselect插件提供了getSelected()方法，可以直接获取所有选中的选项对象，我们可以从中提取ID，拼成适合搜索的格式：

$('#btnSearch').click(function () {
    // 获取所有选中的选项
    var selectedItems = $('#EventCategoryDDL').multiselect('getSelected');
    // 提取每个选项的value，组成数组
    var selectedIds = $.map(selectedItems, function(item) {
        return $(item).val();
    });
    // 把数组转成逗号分隔的字符串，方便DataTables搜索
    var searchValue = selectedIds.join(',');
    
    oTable
        .columns(12).search(searchValue)
        .draw();
    return false;
});

方法二：直接通过jQuery选择器获取所有选中项 #

如果不想依赖插件的API，也可以直接用jQuery选择器选中所有被勾选的option，再提取它们的值：

$('#btnSearch').click(function () {
    // 获取所有选中的option的value，组成数组
    var selectedIds = $("#EventCategoryDDL option:selected").map(function() {
        return $(this).val();
    }).get();
    // 转成逗号分隔的字符串
    var searchValue = selectedIds.join(',');
    
    oTable
        .columns(12).search(searchValue)
        .draw();
    return false;
});

额外说明 #

如果你的DataTables需要模糊匹配多个ID（比如匹配任意一个选中的ID），可以把搜索值改成正则格式，同时开启正则搜索：

var searchValue = selectedIds.length > 0 ? '^(' + selectedIds.join('|') + ')$' : '';
// 第三个参数设为true开启正则搜索，第四个参数设为false关闭智能搜索
oTable.columns(12).search(searchValue, true, false).draw();

这样就能正确获取所有选中的ID，实现多选后的DataTables搜索啦！

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