如何在前端动态修改ASP.NET @Html.DropDownListFor选项（无刷新）

步骤1：调整前端Razor代码 #

把Item2下拉框改为初始禁用的空状态，动态逻辑全部交给前端JavaScript处理：

<tr>
    <td style="text-align: center;">
        item1:
    </td>
    <td colspan="2">
        @Html.DropDownListFor(model => model.item1, (SelectList)ViewData["item1List"], 
            htmlAttributes: new { 
                onchange = "checkItem();", 
                id = "Item1", 
                name = "Item1", 
                @class = "form-control", 
                @style = "min-width: 100%!important;", 
                @required = true 
            })
    </td>
</tr>
<tr>
    <td style="text-align: center;">
        item2:
    </td>
    <td colspan="2">
        @Html.DropDownListFor(model => model.item2, new SelectList(Enumerable.Empty<SelectListItem>()), 
            htmlAttributes: new { 
                id = "item2", 
                name = "item2", 
                disabled = true, 
                @class = "form-control", 
                @style = "min-width: 100%!important;" 
            })
    </td>
</tr>

步骤2：后端添加数据接口 #

在Controller中新增Action，根据Item1的选中值返回对应Item2的选项列表，以JSON格式输出：

public JsonResult GetItem2Options(string item1Value)
{
    IEnumerable<SelectListItem> options;
    // 根据Item1的值判断类型，获取对应选项
    if (IsLocomotive(item1Value))
    {
        options = (SelectList)ViewData["item2List"]; // 客车选项列表
    }
    else
    {
        options = (SelectList)ViewData["differentItem2List"]; // 兼容动车组列表
    }
    // 转换为前端可直接使用的格式
    var result = options.Select(o => new { Text = o.Text, Value = o.Value });
    return Json(result, JsonRequestBehavior.AllowGet);
}

// 自定义判断逻辑，根据实际业务调整
private bool IsLocomotive(string item1Value)
{
    // 示例：假设机车选项的Value包含特定标识
    var locomotiveValues = new List<string> { "loc1", "loc2", "loc3", "loc4", "loc5" };
    return locomotiveValues.Contains(item1Value);
}

步骤3：编写JavaScript动态更新逻辑 #

在页面的<script>标签中实现checkItem函数，通过AJAX异步获取数据并更新Item2：

function checkItem() {
    const item1Value = document.getElementById("Item1").value;
    const item2Dropdown = document.getElementById("item2");
    
    // 清空原有选项
    item2Dropdown.innerHTML = "";

    if (item1Value) {
        // 发送请求获取对应选项
        fetch('/YourControllerName/GetItem2Options?item1Value=' + encodeURIComponent(item1Value))
            .then(res => res.json())
            .then(data => {
                // 填充新选项
                data.forEach(opt => {
                    const option = document.createElement("option");
                    option.value = opt.Value;
                    option.textContent = opt.Text;
                    item2Dropdown.appendChild(option);
                });
                // 启用下拉框
                item2Dropdown.disabled = false;
            })
            .catch(err => {
                console.error('加载选项失败:', err);
                item2Dropdown.disabled = true;
            });
    } else {
        // 未选中Item1时保持禁用
        item2Dropdown.disabled = true;
    }
}

// 页面加载时，如果Item1已有选中值，自动触发更新
window.onload = () => {
    const item1 = document.getElementById("Item1");
    if (item1.value) checkItem();
};

注意将代码中的/YourControllerName/替换为实际的控制器名称。

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