使用带复选框的Select2多选组件，$('form').serialize()无法获取选中值

核心问题分析 #

1. 原生<select>未添加multiple属性：你的select标签声明了数组格式的name（sel-01[]），但缺少multiple属性，原生表单不会将其识别为多选控件，导致序列化时忽略选中值。
2. 插件未同步原生select的选中状态：部分第三方多选插件仅渲染自定义UI，不会自动更新原生<option>的selected属性，而serialize()是基于原生表单元素状态工作的。

解决步骤 #

步骤1：给select添加multiple属性 #

修改HTML中的select标签，加上multiple：

<select name="sel-01[]" id="sel-01" class="select2-multiple" multiple>
    <option></option>
    <option value="AL">Alabama</option>
    <option value="CA">California</option>
    <option value="NY">New York</option>
    <option value="TX">Texas</option>
    <option value="WY">Wyoming</option>
</select>

步骤2：同步插件选中值到原生select #

在change事件中手动将插件选中的值同步到原生select的option上，确保serialize()能读取到：

$(document).on('change','#sel-01',function(){
    // 获取插件选中的值（方法需参考插件文档，此处为常规调用示例）
    var selectedValues = $(this).select2MultiCheckboxes('getSelectedValues');
    
    // 清空原生select的所有选中状态
    $('#sel-01 option').prop('selected', false);
    
    // 为选中的值对应的option设置selected属性
    selectedValues.forEach(function(val){
        $('#sel-01 option[value="'+val+'"]').prop('selected', true);
    });
    
    // 此时序列化表单就能获取到选中值
    console.log($('#search_vendor_form').serialize());
});

备选方案：手动构建提交数据 #

如果插件同步存在问题，可直接收集选中值构建表单数据提交：

$(document).on('change','#sel-01',function(){
    // 获取插件选中值
    var selectedVals = $(this).select2MultiCheckboxes('getSelectedValues');
    
    // 构建表单数据
    var formData = $('#search_vendor_form').serializeArray();
    // 添加多选值到表单数据
    selectedVals.forEach(function(val){
        formData.push({name: 'sel-01[]', value: val});
    });
    
    // AJAX提交示例
    $.ajax({
        url: '你的接口地址',
        method: 'POST',
        data: formData,
        success: function(response){
            // 处理返回结果
        }
    });
});

内容的提问来源于stack exchange，提问作者VED PRAKASH PANDEY