MVC.NET级联下拉框页面刷新后如何保留选项列表？

我明白你遇到的痛点：页面刷新后动态加载的State选项没了，去掉.empty()又会重复追加选项。这本质是因为AJAX动态添加的DOM元素在页面刷新时会被重置，而我们需要在页面初始化时恢复之前的状态，同时保证切换Country时不会重复渲染选项。

下面给你几个可行的解决方案，从简单到优化版：

方案1：页面初始化时主动触发AJAX加载State列表 #

我们可以把加载State的逻辑封装成可复用函数，页面加载完成后，如果Country有选中值，就主动调用这个函数获取并渲染State选项，同时恢复之前选中的State值。

步骤1：修改前端JS代码 #

$(document).ready(function () {
    // 封装加载State列表的函数，支持传入选中的StateId
    function loadStates(countryId, selectedStateId) {
        $.get("@Url.Action("GetStateList","Controllers1")", { sOId: countryId }, function (data) {
            $("#StateId").empty(); // 清空旧选项，避免重复
            $.each(data, function (index, row) {
                // 渲染选项时判断是否需要选中
                const isSelected = row.PersonnelNumber === selectedStateId ? "selected" : "";
                $("#StateId").append(`<option value="${row.PersonnelNumber}" ${isSelected}>${row.Name}</option>`);
            });
        });
    }

    // 页面初始化时：获取当前选中的CountryId和之前保存的StateId
    const initialCountryId = $("#CountryId").val();
    // 可以从后端ViewBag获取，或者用localStorage保存之前的选中值
    const initialStateId = "@ViewBag.SelectedStateId"; 

    // 如果Country已有选中值，加载对应的State列表
    if (initialCountryId) {
        loadStates(initialCountryId, initialStateId);
    }

    // 监听Country变化事件
    $("#CountryId").change(function () {
        const countryId = $(this).val();
        // 可选：把当前选中的Country和State保存到localStorage，刷新后可以恢复
        localStorage.setItem("selectedCountryId", countryId);
        localStorage.setItem("selectedStateId", $("#StateId").val());
        
        loadStates(countryId, ""); // 切换Country时清空State选中值
    });
});

步骤2：后端传递初始选中值 #

在你的页面Action里，把之前选中的CountryId和StateId传递到View：

public ActionResult YourPage()
{
    // 从Session或其他存储中获取之前的选中值（比如用户提交过表单后保存的）
    var selectedCountryId = Session["SelectedCountryId"]?.ToString();
    var selectedStateId = Session["SelectedStateId"]?.ToString();

    ViewBag.SelectedCountryId = selectedCountryId;
    ViewBag.SelectedStateId = selectedStateId;

    // 初始化Country下拉框的逻辑...
    return View();
}

步骤3：设置Country下拉框的初始选中状态 #

在View的Country下拉框里，设置默认选中项：

<select id="CountryId">
    @foreach(var country in Model.Countries)
    {
        <option value="@country.Id" @(country.Id == ViewBag.SelectedCountryId ? "selected" : "")>@country.Name</option>
    }
</select>

方案2：服务器端预渲染State选项（优化体验） #

如果不想依赖AJAX初始化State列表，可以在页面加载时直接从后端获取State数据并渲染，这样页面刷新后直接显示选项，不需要等待AJAX请求。

步骤1：后端Action预加载State数据 #

public ActionResult YourPage()
{
    var selectedCountryId = Session["SelectedCountryId"]?.ToString();
    var selectedStateId = Session["SelectedStateId"]?.ToString();

    ViewBag.SelectedCountryId = selectedCountryId;
    ViewBag.SelectedStateId = selectedStateId;

    // 如果有选中的CountryId，提前查询对应的State列表
    if (!string.IsNullOrEmpty(selectedCountryId))
    {
        db.Configuration.ProxyCreationEnabled = false;
        var stateList = db.Employees.Where(x => x.OrganizationNumber == selectedCountryId && x.Name != null)
                                    .OrderBy(o => o.Name)
                                    .ToList();
        ViewBag.StateList = stateList;
    }

    // 初始化Country下拉框的逻辑...
    return View();
}

步骤2：View中渲染State下拉框 #

<select id="StateId">
    @if(ViewBag.StateList != null)
    {
        @foreach(var state in ViewBag.StateList)
        {
            <option value="@state.PersonnelNumber" @(state.PersonnelNumber == ViewBag.SelectedStateId ? "selected" : "")>@state.Name</option>
        }
    }
</select>

步骤3：保持JS的change事件逻辑 #

JS部分还是保留.empty()+追加的逻辑，确保切换Country时不会重复选项：

$(document).ready(function () {
    $("#CountryId").change(function () {
        const countryId = $(this).val();
        // 保存选中值到Session/localStorage
        localStorage.setItem("selectedCountryId", countryId);
        
        $.get("@Url.Action("GetStateList","Controllers1")", { sOId: countryId }, function (data) {
            $("#StateId").empty();
            $.each(data, function (index, row) {
                $("#StateId").append(`<option value="${row.PersonnelNumber}">${row.Name}</option>`);
            });
        });
    });
});

核心思路总结 #

• 页面刷新丢失选项的原因：动态添加的DOM元素不会被浏览器持久化，刷新后会回到服务器渲染的初始状态。
• 避免重复选项的关键：每次加载新的State列表前必须调用.empty()清空旧选项。
• 恢复状态的方法：要么在页面初始化时通过AJAX重新加载，要么在服务器端预渲染初始的State选项。

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