mvc中ajax动态绑定下拉框

Html控件

 <div class="row" style="margin-top:15px;">
                <div class="col-sm-1 control-label">
                    <label style="color: red; margin-left: -8px;">*</label>
                    @Html.LabelFor(model => model.Offer_ProductClassKIDLeve1)
                </div>
                <div class="col-sm-2">
                    @Html.DropDownListFor(model => model.Offer_ProductClassKIDLeve1, classItems1, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Offer_ProductClassKIDLeve1)
                </div>
                <div class="col-sm-1 control-label">
                    <label style="color: red; margin-left: -8px;">*</label>
                    @Html.LabelFor(model => model.Offer_ProductClassKIDLeve2)
                </div>
                <div class="col-sm-2">
                    @Html.DropDownListFor(model => model.Offer_ProductClassKIDLeve2, classItems2, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Offer_ProductClassKIDLeve2)
                </div>
                <div class="col-sm-1 control-label">
                    <label style="color: red; margin-left: -8px;">*</label>
                    @Html.LabelFor(model => model.Offer_ProductClassKIDLeve2)
                </div>
                <div class="col-sm-2">
                    @Html.DropDownListFor(model => model.Offer_ProductClassKIDLeve3, classItems3, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Offer_ProductClassKIDLeve2)
                </div>
            </div>

Js动态绑定数据

 <script type="text/javascript">
        $(function () {
            $("#Offer_ProductClassKIDLeve1").change(function () {
                var classL = $(this).val();
                if (classL != "" && classL != -1) {
                    $.ajax({
                        type: "post",
                        url: '@Url.Action("getClassL2", "Products")',
                        data: JSON.stringify({ classL: classL }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            if (response != null) {
                                $("#Offer_ProductClassKIDLeve2").html("<option value=-1>请选择</option>");
                                var option = "";
                                //遍历json数据，拼接option，最后添加到select中
                                $(response).each(function (index, value) {
                                    console.log(value)
                                    option += "<option value=" + value.Value + ">" + value.Text + "</option>";
                                });
                                $("#Offer_ProductClassKIDLeve2").append(option); //等同于 $(option).appendTo($("#catagery"));
                            } else {
                                $("#Offer_ProductClassKIDLeve2").html("<option value=-1>请选择</option>");
                            }

                        }
                    })
                } else {
                    $("#Offer_ProductClassKIDLeve2").html("<option value=-1>请选择</option>");
                }
            })
            $("#Offer_ProductClassKIDLeve2").change(function () {
                var classL = $(this).val();
                if (classL != "" && classL != -1) {
                    $.ajax({
                        type: "post",
                        url: '@Url.Action("getClassL3", "Products")',
                        data: JSON.stringify({ classL: classL }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            if (response != null) {
                                $("#Offer_ProductClassKIDLeve3").html("<option value=-1>请选择</option>");
                                var option = "";
                                //遍历json数据，拼接option，最后添加到select中
                                $(response).each(function (index, value) {
                                    console.log(value)
                                    option += "<option value=" + value.Value + ">" + value.Text + "</option>";
                                });
                                $("#Offer_ProductClassKIDLeve3").append(option); //等同于 $(option).appendTo($("#catagery"));
                            } else {
                                $("#Offer_ProductClassKIDLeve3").html("<option value=-1>请选择</option>");
                            }

                        }
                    })
                } else {
                    $("#Offer_ProductClassKIDLeve3").html("<option value=-1>请选择</option>");
                }
            })
        })

后台Action

public ActionResult Index()
        {
               var pClasss1 = OfferServer.ProductsClass.FindByClass("1");
            var selectItemClass1 = new List<SelectListItem> { new SelectListItem { Text = "请选择", Value = "-1", Selected = true } };
            selectItemClass1.AddRange(
              pClasss1.Select(x => new SelectListItem { Text = x.ClassName, Value = x.KID.ToString() }));
            ViewBag.pClass1 = selectItemClass1;
            return View();
        }

        [HttpPost]
        public JsonResult getClassL2(string classL)
        {
            var pClasss2 = OfferServer.ProductsClass.FindByClass(classL);
            var lstItem = new List<SelectListItem>();
            foreach (var item in pClasss2)
            {
                var itemClassL2 = new SelectListItem { Text = item.ClassName, Value = item.KID.ToString() };
                lstItem.Add(itemClassL2);
            }

            return Json(lstItem);
        }
        [HttpPost]
        public JsonResult getClassL3(string classL)
        {
            var pClasss3 = OfferServer.ProductsClass.FindByClass(classL);
            var lstItem = new List<SelectListItem>();
            foreach (var item in pClasss3)
            {
                var itemClassL3 = new SelectListItem { Text = item.ClassName, Value = item.KID.ToString() };
                lstItem.Add(itemClassL3);
            }

            return Json(lstItem);
        }