Mvc 4.0中的級聯下拉列表

Question

我一直在嘗試級聯下拉列表。 為此，我在.cshtml頁面中使用了javascript。 不知道是什么原因，我什至無法調用Js方法，更不用說稍后需要從Js方法內部調用的控制器方法了。 下拉列表正在獲取州和城市的數據，但我沒有根據所選的州來獲取城市。

<div class="editor-label">
    @Html.LabelFor(model => model.State_Id)
</div>
<div class="editor-field">
    @Html.DropDownList("State",null,"Select State", new {@class="span4", id="State"})
    @Html.ValidationMessageFor(model => model.State_Id)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.CityId)
</div>
<div class="editor-field">
    @Html.DropDownList("City",null,"Select City", new {@class="span4", id="City"})
    @Html.ValidationMessageFor(model => model.CityId)
</div>

<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function(e) {
        $("#State").change(function (e) {
            var selectedValue = $(this).val();
            if(selectedValue != "Select") {
                $.ajax({
                    url: '@Url.Action("GetCities","Employer")',
                    type: 'Post',
                    //data:  { "selectedValue": selectedValue},
                    data: {id: $("#State").val()},
                    dataType: 'json',
                    success: function(response) {
                        var items = "";
                        $.each(response, function(i, city) {
                            $("#City").append('<option value="' + city.Value + '">' + city.Text + '</option>');
                        });
                    },
                    error: function (ex) {
                        alert("Failed To Receive States" + ex);
                    }
                });  
            }
        });
    });
</script>

Answer 1

下拉列表是他們自己的野獸。 您可能需要使用循環內的標准DOM方法而不是jQuery的append方法來創建新的OPTION：

                success: function(response) {
                    var items = "", option, $city = $("#City");
                    $.each(response, function(i, city) {
                        option = document.createElement("option");
                        option.value = city.Value;
                        option.innerHTML = city.Text;
                        $city.append(option);
                    });
                },

Answer 2

@Html.DropDownListFor(x => x.LeagueId, Model.LeagueSL, "--Select League--", new { id = "ddlLeague"})

@Html.DropDownListFor(x => x.LeagueId, Model.DivisionSL, "--Select Division--", new { id = "ddlDivision"})

第二個DropDownList為空，它只有選項Label --Select Division--

在第一個下拉列表的change事件上，進行一個AjaxRequest來填充第二個下拉列表。

        var value = $("#DropDown1").val();
        var ddlDivision = $("#DropDownDivision");
            ddlDivision.html('');//clear current contents; 
 $.ajax({
            url: "/Home/GetDivisions",
            type: "GET",
            data: { leagueId: value },
            success: function (data) {

                $.each(data, function (index, item) {
                    //item = this        
                    //populate ddl                                          
                    ddlDivision.append($('<option></option>')
                   .val(item.PropTwo)
                   .html(item.PropOne));
                });
        });

        public JsonResult GetDivisions(int leagueId)
        {    
            using (BaseballEntities context = new BaseballEntities())
            {

                var divisions = (from x in context.Table
                                 where x.LeagueID == leagueId
                                 select new 
                                 {  
                                   PropOne = x.DivisionName,
                                   PropTwo = x.DivisionId
                                 }).ToList();


                return Json(divisions, JsonRequestBehavior.AllowGet);
            }            
        }

編輯：作為旁注，最好使用模型來填充您的dropdownList。 給您的模型一個SelectList屬性

 public List<SelectListItem> LeagueSL { get; set; }//you will need to initialize in constructor

 public ActionResult Index()
 {
             MyViewModel model = new MyViewModel();

              using (MyEntities context = new MyEntities())
             {
                var leagueList = context.League.ToList();

                foreach (var item in leagueList)
                {
                   model.LeagueSL.Add(new SelectListItem() { Text = item.LeagueName, Value = item.LeagueId.ToString() });
                }

             }
        return View(model);
    }