mvc 4中的级联下拉列表

Question

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

这里是视图

此处为cshtml代码段

 <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代码段

<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 下拉列表时。这是因为如果您只有1个项目并且您选择了该项目，则不会触发change()。因此，为了避免你可以做的是当下拉列表中的数据加载数据时添加一个选项标签，以便用户必须选择一个有效的选项并且更改被触发，因此，部门下拉列表会加载数据。所以你的学院改变看起来像这样：

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

注意：更改以代码

上方的注释表示