How to update Chosen dropdownlist's items(cascade dropdownlist)?

Question

I use Chosen plugin. I want to refresh Category (Chosen) dropdownlist, when change Section dropdownlist.

Here is view:

@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 is like:

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

I can create cascade dropdownlist for simple lists, but could not create it for multiple select. I tried this :

<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>

In controller:

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

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

How can I create cascade Chosen dropdownlist?

Answer 1

I think you need to add a little more to your ajax callback. I replaced success method with done. Try this, it works for me:

               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();
                    });
                }

controller action could look like this:

    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);
    }