Laravel 9：多选下拉框仅能选1个选项的问题排查

核心问题1：jQuery与Select2加载顺序错误 #

Select2依赖jQuery才能正常工作，你的代码中先加载了Select2的JS，后加载jQuery，这会导致Select2无法正确初始化，进而多选功能失效。

修复步骤： #

调整资源加载顺序，确保jQuery优先加载：

<!-- 先加载jQuery -->
<script src="assets/js/jquery.min.js"></script>
<!-- 再加载Select2的样式和脚本 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

核心问题2：隐藏元素的Select2初始化时机异常 #

#mode_employee初始状态为隐藏，页面加载完成时直接初始化Select2，会因为元素不可见导致初始化异常。建议在元素显示或模态框激活时再初始化。

修复方案（二选一）： #

方案A：监听模态框显示事件初始化

修改JS代码，在模态框完全显示后初始化Select2，同时解决下拉框被模态框遮挡的问题：

$('#newsetting').on('shown.bs.modal', function () {
    $("#mode_karyawan").select2({
        dropdownParent: $(this)
    });
});

方案B：切换模式时初始化Select2

修改mode_alokasi的切换逻辑，仅在显示#mode_employee时初始化Select2：

$('#modalokasi').on('change', function(a)
{
    if(a.target.value== 'Berdasarkan Departemen')
    {
        $('#mode_departemen').prop("hidden", false);
        $('#mode_employee').prop("hidden", true);
        $("#mode_karyawan").select2('destroy');
    }
    if(a.target.value== 'Berdasarkan Karyawan')
    {
        $('#mode_departemen').prop("hidden", true);
        $('#mode_employee').prop("hidden", false);
        $("#mode_karyawan").select2({
            dropdownParent: $('#newsetting .modal-content')
        });
    }
});

额外优化：表单验证与数据接收 #

在Controller的store方法开头添加验证规则，确保mode_karyawan为数组类型：

$request->validate([
    'mode_karyawan' => 'array',
    // 可添加其他字段的验证规则
]);

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