ASP.NET MVC表单提交后如何保留下拉框选中值？

一、基础HTML表单提交后保留选中值的方法 #

因为是GET提交，提交后URL会携带参数，只需通过JS读取URL参数并设置对应下拉框的选中值即可：

<form method="get" action="">
   <select name="name">
      <option value="a">a</option>
      <option value="b">b</option>
   </select>
   <select name="location">
      <option value="x">x</option>
      <option value="y">y</option>
   </select>
   <input type="submit" value="Submit" />
</form>
<script>
// 读取URL查询参数的工具函数
function getUrlParam(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
}

window.onload = function() {
    const nameVal = getUrlParam('name');
    if (nameVal) {
        document.querySelector('select[name="name"]').value = nameVal;
    }
    const locationVal = getUrlParam('location');
    if (locationVal) {
        document.querySelector('select[name="location"]').value = locationVal;
    }
}
</script>

二、针对你的ASP.NET MVC场景解决DealerID选中值丢失问题 #

核心问题是：表单提交后Model.DealerID有值，但DealerID下拉框通过异步加载选项，加载完成后未自动选中对应值。以下是分步解决方案：

1. 传递Model值到JS #

在.cshtml页面中，将提交后的DealerID、Region、ByRegion值传递给JS：

<script>
// 从Model获取提交后的关键值
const savedDealerID = '@Model.DealerID';
const currentRegion = '@Model.Region';
const currentByRegion = '@Model.ByRegion';
</script>

2. 修改异步加载函数，自动选中保存的DealerID #

在getDealers函数生成选项时，给匹配savedDealerID的选项添加selected属性：

function getDealers(e) {
    let value = $(e).val();
    $.get("@Url.Action("GetDealers", "Admin")?region=" + value, function (res) {
        var markup = "";
        for (var i = 0; (res != null) && (i < res.length); i++) {
            // 匹配保存的DealerID，添加选中属性
            const selectedAttr = res[i].Value === savedDealerID ? ' selected' : '';
            markup += '<option value='+res[i].Value+' '+selectedAttr+'>'+res[i].Text+"</option>";
        }
        $('#DealerID').prop('disabled', false);
        $("#DealerID").html(markup).show();
    });
}

3. 调整updateForm逻辑，确保页面加载时触发正确的经销商加载 #

修改条件判断，确保表单提交后能正确加载经销商列表：

const updateForm = (changeElement) => {
    let byModel = document.getElementById("ByModel");
    let byRegion = document.getElementById("ByRegion");
    let region = document.getElementById("Region");
    let dealership = document.getElementById("DealerID");
    window.byModel = byModel;
    window.byRegion = byRegion;
    window.region = region;
    window.dealership = dealership;

    if (changeElement === '3') {
        dealership.value = "";
    }
    if (byRegion.value !== "Dealer" && dealership.value.length > 0) {
        dealership.innerHTML = "";
    }
    if (changeElement === '2' && byRegion.value === "All" && byModel.value.length > 0) {
        region.innerHTML = "";
        document.forms[0].submit();
    }
    // 修改条件：当ByRegion为Dealer且Region有值时，直接加载经销商
    if (currentByRegion === "Dealer" && currentRegion.length > 0) {
        getDealers(region);
    } else {
        $('#DealerID').prop('disabled', true);
        $("#DealerID").html("").show();
    }
    // 移除原有的setTimeout逻辑，改为在getDealers中直接处理选中
}

4. 修复Submit按钮的错误逻辑 #

你的Submit按钮带有onclick="history.go(-1);"，会导致页面回退而非提交表单，需移除该事件：

<input type="submit" value="Submit" class="submit" />

5. 确保后端Action正确绑定参数 #

检查你的提交Action，确保DealerID被正确绑定到Model：

[HttpGet]
public ActionResult YourActionName(YourModelType model)
{
    // 确保model.DealerID被正确接收
    // 重新加载Model的其他数据（如Regions）
    model.Regions = // 你的加载逻辑
    return View(model);
}

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