Select2与Bootstrap Modal设置选中选项异常问题

我看了你的代码，发现几个关键问题导致点击编辑按钮后Select2无法正常选中对应值，下面一步步帮你解决：

问题根源 #

1. 重复的ID：页面里有两个id="megaagent_rainmaker_select"的元素（模态框内外各一个），DOM中ID必须唯一，这会导致选择器出错，可能选中了错误的select元素。
2. Select2未触发更新：你直接用.val()设置值后，没有通知Select2更新UI状态，对于AJAX加载的Select2来说，这一步必不可少。
3. 选项可能未加载：因为Select2是通过AJAX远程获取选项的，你要设置的ID对应的选项可能还没被加载到select中，直接设置val不会生效。

分步解决方案 #

1. 修复重复ID问题 #

把模态框内的select元素ID改成唯一值，比如megaagent_rainmaker_select_modal，避免和页面其他元素冲突：

<!-- 模态框内的select修改后的代码 -->
<select class="form-control kt-select2" id="megaagent_rainmaker_select_modal" name="param" multiple="multiple" style="width: 100%"></select>

2. 优化表格行数据获取方式 #

你之前用了一堆.prev()来获取ID，这种方式非常脆弱——只要表格结构调整（比如新增/删除列），代码就会失效。建议给表格中存储rainmaker ID的单元格添加data属性：

<!-- 表格中的对应单元格示例 -->
<td data-rainmaker-id="{{ 这里填rainmaker的ID值 }}">{{ 这里填rainmaker的显示文本 }}</td>

3. 修改按钮点击事件代码 #

更新点击事件，确保正确获取数据、处理Select2选项并触发更新：

$(".edit-record").click(function () {
    // 找到当前按钮所在的表格行
    const $row = $(this).closest('tr');
    // 从data属性获取ID和显示文本
    const rainmakerId = $row.find('[data-rainmaker-id]').data('rainmaker-id');
    const rainmakerText = $row.find('[data-rainmaker-id]').text().trim();

    // 选中模态框内的Select2元素
    const $select = $("#megaagent_rainmaker_select_modal");

    // 检查Select2中是否已经存在该选项
    const optionExists = $select.find(`option[value="${rainmakerId}"]`).length > 0;

    if (!optionExists) {
        // 如果不存在，创建新选项并添加到select中
        const newOption = new Option(rainmakerText, rainmakerId, true, true);
        $select.append(newOption);
    }

    // 设置选中并触发Select2更新
    $select.val([rainmakerId]).trigger('change');

    // 打开模态框
    $("#kt_modal_megaagent").modal();
});

4. 更新Select2初始化代码 #

把初始化代码中的select ID改成新的megaagent_rainmaker_select_modal：

var rainmakerSelect = function () {
    var demos = function () {
        const CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        // 用新的ID初始化Select2
        $('#megaagent_rainmaker_select_modal').select2({
            language: "es",
            placeholder: "Escriba y seleccione",
            allowClear: true,
            maximumSelectionLength: 1,
            ajax: {
                url: '/admin/megaagent/getrainmaker',
                type: "get",
                dataType: 'json',
                delay: 150,
                data: function (params) {
                    return {
                        _token: CSRF_TOKEN,
                        search: params.term
                    };
                },
                processResults: function (response) {
                    return {
                        results: response
                    };
                },
                cache: true
            }
        });
    }

    return {
        init: function () {
            demos();
        }
    };
}();

jQuery(document).ready(function () {
    rainmakerSelect.init();
});

额外说明 #

• 因为你的Select2设置了multiple="multiple"（即使限制了最多选1个），所以设置val的时候最好传数组[rainmakerId]，这样更符合多选组件的规范。
• 使用new Option(...)的时候，最后两个true参数分别表示“默认选中”和“当前选中”，能确保选项添加后直接处于选中状态。
• 触发trigger('change')是关键，这会让Select2重新渲染UI，显示选中的选项。

内容的提问来源于stack exchange，提问作者Belisario Peró