如何更新选择下拉列表的项目（级联下拉列表）？

Question

我使用Chosen 插件。当更改部分下拉列表时，我想刷新类别（选择）下拉列表。

这里是视图：

@model CategoryInputModel

@Html.DropDownListFor(model => model.SectionId, ViewBag.SectionList as IEnumerable<SelectListItem>, new { id = "SectionId" })

@Html.ListBoxFor(model => model.CategoryIdSet, ViewBag.AllCategoryList as MultiSelectList
               , new
                 {
                   @class = "chzn-select",
                   data_placeholder = "Choose Categories...",
                   @style = "width : 500px;",
                   id = "CategoryIdSet"
                })

CategoryInputModel 是这样的：

public class CategoryInputModel
{
        public string Name { get; set; }
        public int SectionId{ get; set; }
        public List<int> CategoryIdSet{ get; set; }
}

我可以为简单列表创建级联下拉列表，但无法为多选创建它。我试过这个：

<script type="text/javascript">
                    $(function () {
                        $("#SectionId").change(
                        function () {
                            loadLevelTwo(this);
                        });
                        loadLevelTwo($("#SectionId"));
                    });
                    function loadLevelTwo(selectList) {
                        var selectedId = $(selectList).val();
                        $.ajax(
                        {
                            url: "@Url.Action("GetCategoriesBySectionId", "Project")",
                            type: "GET",
                            data: { id: selectedId },
                            success: function (data) {
                                $("#CategoryIdSet").html($(data).html());
                            },
                            error: function (xhr) {
                                alert("Something went wrong, please try again");
                            }
                        });
                    }
                </script>

在控制器中：

    public ActionResult GetCategoriesBySectionId(int id)
    {
        var result = MyService.GetCategoriesBySectionId(id);

        // **its problem to create partial view that return chosen dropdownlist I need**
    }

如何创建级联选择下拉列表？

Answer 1

我认为您需要在 ajax 回调中添加更多内容。我用 done 替换了成功方法。试试这个，它对我有用：

               function loadLevelTwo(selectList) {
                    var selectedId = $(selectList).val();
                    $.ajax(
                    {
                        url: "@Url.Action("GetCategoriesBySectionId", "Project")",
                        type: "GET",
                        data: { id: selectedId },
                        error: function (xhr) {
                            alert("Something went wrong, please try again");
                        }
                    }).done(function (data) {
                        $("#CategoryIdSet").children().each(function (index, option) {
                            $(option).remove();
                        });

                        //blank option
                        var items = "<option selected value=\"\"></option>";

                        $.each(data,
                            function () {
                                items += "<option value=\"" + this[0] + "\">" + this[1] + "</option>";
                        });

                        $("#CategoryIdSet").html(items)
                        $("#CategoryIdSet").trigger("liszt:updated");
                        $("#CategoryIdSet").change();
                    });
                }

控制器动作可能如下所示：

    public ActionResult GetCategoriesBySectionId(int id)
    {
        var result = MyService.GetCategoriesBySectionId(id);

        //build JSON.  
        var modelDataStore = from m in result 
                             select new[] { m.YourValueProperty.ToString(),
                                                m.YourTextProperty };

        return Json(modelDataStore, JsonRequestBehavior.AllowGet);
    }