AJAX加载数据的Select2初始化后无法设置选中值求助

问题原因 #

你使用的是Select2的AJAX动态加载选项模式，初始状态下<select>标签中没有对应值为95的<option>元素。Select2依赖DOM中的选项来识别选中状态，直接调用val()只会修改原生select的值，无法同步到Select2的UI层，所以看不到选中效果。

解决方案 #

需要先为目标值创建对应的<option>元素并添加到select中，再设置选中状态并触发change事件，让Select2同步更新UI。

方法1：已知选中项的ID和显示文本（推荐）

如果已经明确要选中项的id和显示文本，直接手动创建选项：

// 获取目标select元素
const $select = $("#InputProjectName");
// 创建并添加对应选项，最后两个true参数标记为选中状态
$select.append(new Option('Id:95 -Name:对应项目名称', 95, true, true));
// 触发change事件，同步Select2状态
$select.trigger('change');

方法2：先通过AJAX获取选中项信息再设置

如果不知道选中项的显示文本，可以先调用项目接口获取对应ID的详情，再创建选项：

const targetId = 95;
// 调用接口获取目标项目数据
$.post("/Project/GetProject", { projectName: targetId, recordId: targetId }, function(data) {
    const $select = $("#InputProjectName");
    // 筛选出对应ID的数据项
    const targetItem = data.find(item => item.Id === targetId);
    if (targetItem) {
        const optionText = `Id:${targetItem.Id} -Name:${targetItem.ProjectName}`;
        $select.append(new Option(optionText, targetItem.Id, true, true));
        $select.trigger('change');
    }
}, 'json');

针对你代码的适配说明

你的Select2配置了multiple: true但maximumSelectionLength: 1，本质是单选模式，设置单个值时用val([95])格式是符合要求的，但必须先添加对应<option>元素。另外注意你的初始化代码末尾多了一个冗余的});，需要删除以避免语法错误。

完整修改示例 #

在Select2初始化完成后，添加设置选中值的代码：

$("#InputProjectName").select2({
    allowClear: true,
    tags: true,
    placeholder: 'Lütfen seçiniz',
    minimumInputLength: 1,
    tokenSeparators: [','],
    multiple: true,
    maximumSelectionLength: 1,
    createTag: function (tag) {
        let term = $.trim(tag.term);
        if (term.length < 3) {
            return null
        }
    },
    ajax: {
        url: "/Project/GetProject",
        dataType: 'json',
        type: "POST",
        delay: 750,
        data: function (params) {
            return {
                projectName: params.term,
                recordId: params.term,
                page: params.page
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;

            var items = [];

            for (var i in data) {
                var item = data[i];
                items.push({ id: item.Id, text: 'Id:' + item.Id + ' -Name:' + item.ProjectName });
            }

            return {
                results: items
            };
        },
        cache: true
    },
}).on('select2:select', function (e) {
    var selectedValueArray = $("#InputProjectName").val();
    if (selectedValueArray) {
        var selectedValue = selectedValueArray[0];
        GetFillList($("#InputItem"), '/Project/GetQuestion/', selectedValue);
    }
}).on("select2:unselecting", function (e) {
    //$("#InputItem").val(null).trigger("change");
});

// 添加设置选中值的代码
const targetProjectId = 95;
const $projectSelect = $("#InputProjectName");
// 替换为实际的项目名称
$projectSelect.append(new Option('Id:95 -Name:你的项目名称', targetProjectId, true, true));
$projectSelect.trigger('change');

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