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

Posted 2023-05-09

【中文标题】在更改第一个 ddl 时使用 jquery ajax 绑定下拉列表

【英文标题】：bind drop down list using jquery ajax on change of first ddl

【发布时间】：2013-05-29 15:04:12

【问题描述】：

我有两个下拉列表，第一个下拉列表的 onchange 我想在 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;
    

【参考方案1】：

首先修复您的控制器操作，使其返回 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
            )
        );
    );

【讨论】：

嗨达林，感谢以上。我遇到了一个关于您的解决方案的新帖子中发布的 lil 问题； ***.com/questions/36393409/… 任何帮助将不胜感激！