在更改第一个ddl时使用jquery ajax绑定下拉列表

本文关键字：jquery ajax 绑定 下拉列表 第一个 ddl | 更新日期: 2023-09-27 18:16:30

我有两个下拉列表，在第一个下拉列表的变化，我想在ajax填充第二个。我在ajax中得到SelectListItem如何传递到下拉列表来绑定它?

视图:

                @Html.DropDownList("FirstID", ViewBag.Groups as IEnumerable<SelectListItem> )
                @Html.DropDownList("SecondID", ViewBag.Policies as IEnumerable<SelectListItem>)

视图中的Ajax方法:

$(function () {
    $('#FirstID').change(function () {
        var selectedValue = $(this).val();
        $.ajax({
            url:  '@Url.Action("BuildSecondDropDownLists", "controller")',
            type: "POST",
            data: { id: selectedValue },
           error: function (xhr, ajaxOptions, thrownError) {
               alert(xhr.status);
               alert(thrownError);
           },
            success: function (result) {
                alert(result);
                 //here how i can bind second drop down list
            }
        });
    });
});

控制器 : 

  public IEnumerable<SelectListItem> BuildSecondDropDownLists(int id)
    {
        Pol = new SelectList(GetData(), "SecondID", "Name");

        ViewBag.Pol = Pol;
        return Pol;
    }

在更改第一个ddl时使用jquery ajax绑定下拉列表

首先修复控制器动作，使其返回JSON而不是某些IEnumerable<SelectListItem>。记住在ASP中。. NET MVC控制器动作必须返回ActionResults:

public ActionResult BuildSecondDropDownLists(int id)
{
    var result = GetData();
    return Json(result, JsonRequestBehavior.AllowGet);
}

，然后循环遍历返回的元素，并将它们附加到第二个下拉列表中:

success: function (result) {
    var secondDdl = $('#SecondID');
    secondDdl.empty();
    $.each(result, function() {
        secondDdl.append(
            $('<option/>', {
                value: this.SecondID,
                html: this.Name
            })
        );
    });
}
相关文章：