MVC下拉框的级联功能

MVC下拉框的级联功能

下拉框的级联：根据前一个下拉框的选择，限定后一个下拉框的选择范围。
也就是说，第二个下拉框可选内容，会根据第一个下拉框的选择而改变。

1.控制器里：
这里的示例代码里，是根据ChangeType来限制ChangeItem

#region  GetDropDownList
//先生成下拉框
        public void LoadDropDownList()
        {
            var result = Business.Instance.GetAllDropDownList();
            List<SelectListItem> StatusList1 = new List<SelectListItem>();
            StatusList1.Add(new SelectListItem { Text = "", Value = "" });
            var status = result.Where(x => x.SYSNAME == "STATUS").ToList();
            if (status != null && status.Count > 0)
            {
                foreach (var item in status)
                {
                    StatusList1.Add(new SelectListItem { Text = item.SYSVALUE, Value = item.SYSVALUE });
                }

            }
            ViewBag.StatusList = StatusList1;


            #region ChangeTypeList
            List<SelectListItem> ChangeTypeList = new List<SelectListItem>();
            ChangeTypeList.Add(new SelectListItem { Text = "", Value = "" });
            var change1 = result.Where(x => x.TYPE == "Change").ToList();
            if (change1 != null && change1.Count > 0)
            {
                var change11 = change1.Select(x => x.SYSNAME).Distinct().ToList();
                if (change11 != null && change11.Count > 0)
                {
                    foreach (var item1 in change11)
                    {
                        ChangeTypeList.Add(new SelectListItem { Text = item1, Value = item1 });
                    }
                }
            }
            ViewBag.ChangeTypeList = ChangeTypeList;
            ViewBag.ChangeItemList = ChangeTypeList;
            ViewBag.ChangeClassList = ChangeTypeList;
            #endregion

        }

        #endregion

        #region GetChangeItemList
        //这个是被改变的下拉框
        public JsonResult GetChangeItemList(string ChangeType)
        {
            var result = Business.Instance.GetAllDropDownList().Where(x => x.TYPE == "Change").ToList();
            var rst1 = result.Where(x => x.SYSNAME == ChangeType).ToList();
            List<SelectListItem> ChangeItemList = new List<SelectListItem>();
            ChangeItemList.Add(Utilities.UtilCommon.GetDefaultNoneItem());
            if (rst1 != null)
            {
                foreach (var attr in rst1)
                {
                    ChangeItemList.Add(new SelectListItem() { Text = attr.SYSVALUE, Value = attr.SYSVALUE });
                }
            }

            return Json(ChangeItemList, JsonRequestBehavior.AllowGet);
        }

        #endregion

在Index控制器里，调用：
LoadDropDownList();

2.前端代码：

<div class="form-group">
    @Html.LabelFor(m => m.Change_Type, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.Change_Type, ViewBag.ChangeTypeList as List<SelectListItem>, new { @class = "from-control", @onchange = "FillChangeItem('Change_Type','ChangeItem')" })
        @Html.ValidationMessageFor(m => m.Change_Type)
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(m => m.ChangeItem, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownListFor(m => m.ChangeItem, ViewBag.ChangeItemList as List<SelectListItem>, new { @class = "from-control"})
    </div>
</div>

js:

        function FillChangeItem(frame1, frame2) {
            var ChangeItem = $('#' + frame1).val();
            $('#' + frame2).empty();

            $.post("/TKManage/PCNRequest/GetChangeItemList", { ChangeType: ChangeItem }, function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#" + frame2).append("<option value='" + data[i].Value + "'>" + data[i].Value + "</option>");
                }
            });

        }