远程数据源Select2控件预选中城市选项失败问题求助

1. 确认页面初始化时的城市数据传递 #

检查Razor页面的城市下拉框是否正确渲染了预选中的option，确保ID和名称与数据库存储的一致，且ID类型和远程接口返回的匹配：

<select id="CitySelect" asp-for="Model.CityId" class="form-control">
    @if (Model.CityId != null && Model.CityName != null)
    {
        <option value="@Model.CityId" selected>@Model.CityName</option>
    }
</select>

注意：如果CityId是数字类型，不要给value加引号，避免类型不匹配导致匹配失败。

2. 初始化Select2时正确配置预选中数据 #

如果没有预先渲染option，要在Select2初始化时通过data参数传入符合格式的预选中对象（必须包含id和text字段）：

$("#CitySelect").select2({
    ajax: {
        url: "/Cities/LoadCities",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                searchTerm: params.term,
                stateId: $("#StateSelect").val()
            };
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        id: item.Id,
                        text: item.Name
                    }
                })
            };
        },
        cache: true
    },
    placeholder: "选择城市",
    minimumInputLength: 0,
    // 传入预选中的城市数据
    data: [{ id: @Model.CityId, text: '@Model.CityName' }]
});

如果CityId是字符串类型，需要给id值加引号：id: '@Model.CityId'。

3. 验证远程接口返回的数据格式 #

检查控制台里远程接口返回的JSON数据，确保每个城市项的字段与processResults里的映射一致。比如接口返回格式应为：

[{"Id":1,"Name":"北京"},{"Id":2,"Name":"上海"}]

如果接口返回的字段名是CityId和CityName，要同步修改processResults里的映射逻辑：

return {
    id: item.CityId,
    text: item.CityName
}

4. 确保初始化时机正确 #

将Select2初始化代码放在DOM加载完成的回调中，避免DOM未加载完成时执行：

$(document).ready(function() {
    // 这里写Select2初始化代码
});

5. 排查重复初始化或冲突问题 #

检查页面是否多次调用select2()初始化同一个下拉框，重复初始化会导致预选中状态失效，确保只执行一次初始化逻辑。

6. 调试验证预选中数据准确性 #

在初始化前打印预选中的城市数据，确认Razor页面是否正确传递了模型值：

console.log("预选中城市ID:", @Model.CityId);
console.log("预选中城市名称:", '@Model.CityName');

如果输出为空或错误值，说明后端未正确给Model.CityId和Model.CityName赋值，需要检查后端逻辑。

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