Select2多选组件空白选项始终选中及默认选中问题求助

针对你遇到的这两个Select2多选场景下的问题，我来一步步帮你梳理解决方案：

问题1：首次选择任意选项时，空白选项的null值总会被选中 #

这个问题的核心原因有两个：

• 你的<select>标签缺少multiple属性：没有这个属性的话，Select2会默认按单选模式处理，空选项会被自动选中，和你手动选择的选项产生冲突。
• 表单字段名未适配多选场景：多选功能需要把字段名写成category_id[]，这样后端才能正确接收多个选中的值，否则不仅后端只能拿到最后一个选中项，还会干扰Select2的选中逻辑。

问题2：不设置placeholder，页面加载时第一个选项会被自动选中 #

这是因为在未配置placeholder的情况下，Select2会遵循原生select的默认行为——如果没有指定selected属性，原生select在非多选模式下会自动选中第一个选项；即使开启了多选，空选项的存在也可能触发这个异常选中的情况。

修正后的HTML代码 #

<select class="form-control select2-multiple" name="category_id[]" multiple="multiple">
    <!-- 保留空option用于配合placeholder展示，不需要的话可以直接删除 -->
    <option></option>
    @foreach($instrument_category as $key=>$value)
        <option value="{{ $value }}">{{ $value }}</option>
    @endforeach
</select>

配套的Select2初始化配置 #

$('.select2-multiple').select2({
    placeholder: '请选择分类', // 设置placeholder彻底解决自动选中第一个选项的问题
    allowClear: true, // 可选配置，添加一键清空选中项的按钮
    width: '100%' // 保证组件宽度适配父容器
});

额外注意事项 #

1. 如果你不需要空选项，可以直接删除<option></option>，但保留它配合placeholder使用能提升用户体验。
2. 建议使用最新版本的Select2，旧版本可能存在一些多选逻辑的遗留bug。
3. 后端接收数据时，要注意category_id[]是数组类型，比如PHP中可以直接用$_POST['category_id']获取到所有选中项的数组。

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