如何在选择的其他下拉列表中填充下拉列表 asp .net mvc

Question

（对不起，我已经搜索了相关问题，但我只找到了这个没有答案： Drop-down list not populating other controls)

好的，所以我被困在这里，首先，我是严格的后端 .net 开发人员，但我处于需要帮助的情况， 好的，所以问题是： 我不知道如何填充取决于第一个组合框的第二个组合框， 例如，有客户和联系人，每个客户都有自己的联系人，所以根据您选择的客户，我们需要显示他的联系人： 这个怎么做？在 wpf 平台上，我们只是有一个 on item selection changed 事件，类似的，并且在更改时我们更新了第二个组合框，但我不知道如何在 asp.net mvc 中执行此操作，我填充了第一个组合框像这样：

<div class="form-group">
            @Html.LabelFor(model => model.ClientID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("ClientID", TempClass.GetClients, "Select Client")
            </div>
        </div>

TempClass.GetClients 返回的地方

IEnumerable<SelectListItem>

具有以下值：ID 和客户名称。

希望您能理解，提前致谢。

Answer 1

基本上，您需要执行以下步骤：

使用jquery捕捉下拉列表http://api.jquery.com/change/变化的事件

$("#Dropdown1").on("change", function(){
    var selectedValue = $(this).val();
    AjaxCall(selected);
})

然后，使用 Ajax 调用控制器上的操作，该操作填充第二个下拉列表的值。

function AjaxCall(value){
    $.ajax({
        type: "GET",
        url : 'UrlToAction',
        data: { value: value },
        success: function(data) {
            PopulateValueForSecondDropdown(data);
        }
    });
}

从 Ajax 接收数据后，在成功方法中，使用 jquery 填充第二个下拉列表的值

function PopulateValueForSecondDropdown(data) {
    $('#DROPDOWN2').empty(); 
    data.forEach(function(item){
        $('#DROPDOWN2').append('<option value="' + item.KEY+ '">' + item.VALUE + '</option>');
    });
}