mvc 4中的级联下拉列表

Question

我创建了如图所示的级联下拉列表

这里是风景

这里是cshtml代码sn-p

 <div class="form-group">
        <div class="editor-label">
        @Html.LabelFor(model => model.HEI_ID)
         @Html.Label("*", new { id="star" , @class = "requiredFiledCol" })               
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(m => m.HEI_ID, (SelectList)ViewBag.UniversityList_New, "Select University / Institute", new {id="University", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.HEI_ID)
    </div>
   </div>

  <div class="form-group">
    <div class="editor-label">
        @Html.LabelFor(model => model.COL_ID)
        @Html.Label("*", new { id="star" , @class = "requiredFiledCol" })
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(m => m.COL_ID, (SelectList)ViewBag.FacultyList_New, "Select College", new {id="College", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.COL_ID)
    </div>
    </div>


  <div class="form-group">
     <div class="editor-label">
        @Html.LabelFor(model => model.DEP_ID)
        @Html.Label("*", new { id="star" , @class = "requiredFiledCol" })
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(m => m.DEP_ID, (SelectList)ViewBag.DepartmentList_New, "Select Department", new { id="Department" , @class = "form-control" })
        @Html.ValidationMessageFor(model => model.DEP_ID)
    </div>
    </div>

这是jquery代码sn-p

<script type="text/javascript">
$(document).ready(function () {
    //Dropdownlist Selectedchange event
    $("#University").change(function () {
        $("#College").empty();
        $("#Department").empty();

        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetColleges")', // we are calling json method
            dataType: 'json',
            data: { uni_id: $("#University").val() },
            success: function (Colleges) {

                $.each(Colleges, function (i, state) {

                    $("#College").append('<option value="' + state.Value + '">' + state.Text + '</option>');
                }); 
            },
            error: function (ex) {
                alert('Failed to retrieve states.' + ex);
            }
        });

        return false;
    })

    $("#College").change(function () {
        $("#Department").empty();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetDepartments")', // we are calling json method
            dataType: 'json',
            data: { col_id: $("#College").val() },
            success: function (Departments) {

                $.each(Departments, function (i, state) {


                    $("#Department").append('<option value="' + state.Value + '">' + state.Text + '</option>');
                }); 
            },
            error: function (ex) {
                alert('Failed to retrieve states.' + ex);
            }
        });
                return false;
            })


});

但是在最后一个下拉列表（部门下拉列表）中没有填充，我该如何克服这个

这是与该模块相关的动作方法

 public JsonResult GetColleges(string uni_id)
    {
        var Colleges = from college in db.Colleges
                       where college.HEI_ID == uni_id & college.Status == true
                       select college;


        //List<SelectListItem> states = new List<SelectListItem>();

        return Json(new SelectList(Colleges.ToList(), "College_ID", "College_Name"));
    }

    public JsonResult GetDepartments(string col_id)
    {
        var Departments = from department in db.Departments
                          where department.College_ID == col_id & department.Status == true
                          select department;


        //List<SelectListItem> states = new List<SelectListItem>();

        return Json(new SelectList(Departments.ToList(), "Department_ID", "Name_of_Department"));
    }

Answer 1

我试用了您的代码，它对我很有效，但当您只有一项返回并填充在 College 下拉列表中时，它就不行了。那是因为change() 如果您只有 1 个项目并且您选择了它，则不会被解雇。因此，为了避免您可以做的是在下拉列表中级联加载数据时添加一个选项标签，以便用户必须选择一个有效选项并触发更改，因此部门下拉列表会加载数据。所以你的大学变化可能是这样的：

$("#College").change(function () {
    $("#Department").empty();

    //If option label was selected then do not send request
    if ($("#College").val() == 0)
    {
        return;
    }

    $.ajax({
        type: 'POST',
        url: '@Url.Action("GetDepartments")', 
        dataType: 'json',
        data: {
            col_id: $("#College").val()
        },
        success: function (Departments) {

            //Add option label as the first element (selected by default)
            $("#Department").append('<option value="0">-SELECT COLLEGE-</option>');

            $.each(Departments, function (i, state) {
                $("#Department").append('<option value="' + state.Value + '">' + state.Text + '</option>');
            });
        },
        error: function (ex) {
            alert('Failed to retrieve states.' + ex);
        }
    });
    return false;
});

注意：代码上面的注释指示的更改