使下拉列表依赖于 MVC Core 中的另一个下拉列表

Posted 2023-04-13

【中文标题】使下拉列表依赖于 MVC Core 中的另一个下拉列表

【英文标题】：Make drop down list dependent on another drop down in MVC Core

【发布时间】：2021-03-12 13:16:31

【问题描述】：

这类似于Drop-down box dependent on the option selected in another drop-down box 提出的问题，除了我想使用 C# 类来保留下拉值列表而不是纯 html。上一个问题中使用的 jQuery 不适用于我正在尝试做的事情。

我希望用户选择车辆品牌，然后让模型列表依赖于选择的品牌

C# 类：DropDowns.cs

public static List<SelectListItem> MakeList (string defaultLabel = "---")

    List<SelectListItem> makeList = new List<SelectListItem>();

    makeList.Add(new SelectListItem Text="defaultLabel", Value = "");
    makeList.Add(new SelectListItem Text="Ford", Value = "Ford");
    makeList.Add(new SelectListItem Text="Toyota", Value = "Toyota");

    return makeList;

public static List<SelectListItem> ModelList (string defaultLabel = "---")

    List<SelectListItem> modelList = new List<SelectListItem>();

    modelList.Add(new SelectListItem Text="defaultLabel", Value = "");

    //Ford models
    modelList.Add(new SelectListItem Text="F-150", Value = "F-150");
    modelList.Add(new SelectListItem Text="Mustang", Value = "Mustang");

    //Toyota models
    modelList.Add(new SelectListItem Text="Rav4", Value = "Rav4");
    modelList.Add(new SelectListItem Text="Tundra", Value = "Tundra");

    return modelList;

HTML：myView.cshtml

<select name="make" asp-for="Make" asp-items="DropDowns.MakeList()"></select>
<select name="model" asp-for="Model" asp-items="DropDowns.ModelList()"></select>

我不确定是否可以将 jQuery 用于 asp-items。也许我需要在我的模型列表中添加 if 语句？

【问题讨论】：

虽然您可以根据页面渲染上的默认选择适当填充第二个下拉列表，但任何后续更改都需要运行一些 javascript 以根据任何其他选择更新下拉列表的内容因为您的服务器端代码将不再运行，并且所有内容都在客户端进行评估。您要么必须在客户端渲染所有组合并让 JS 适当地更新它，要么使用 AJAX 或类似方法从 JS 回调第一个选择以获取该选择的选项并更新 UI。

【参考方案1】：

asp-items依赖服务端解析，如果这样动态改变下拉列表，客户端和服务端需要保持实时交互。所以这种方法是不可能的。你需要使用 jQuery。

当您看到该页面时，asp-items 已被解析为 html。这时候就可以通过jQuery来改变html了。

<select name="make" asp-for="Make" asp-items="DropDowns.MakeList()"></select>
<select name="model" asp-for="Model" asp-items="DropDowns.ModelList()"></select>
@section Scripts 
<script>
    $(function () 
        let model = $('#Model').children()
        $('#Make').change(function () 
            let make = $(this).val()
            if (make == 'Ford') 
                $('#Model').empty()
                $('#Model').append(model)
                $('#Model option').eq(4).remove()
                $('#Model option').eq(3).remove()
             else if (make == 'Toyota') 
                $('#Model').empty()
                $('#Model').append(model)
                $('#Model option').eq(2).remove()
                $('#Model option').eq(1).remove()
            
        )
    )
</script>