Asp.net mvc 如何在MVC4 Jquery中重置包含级联下拉列表的部分视图

我正在使用MVC4/EF，我有四个级联dropdownlist，我第一次让它工作。因此，当页面第一次呈现时，我可以选择第一个下拉列表，并在第二个下拉列表中过滤结果。通过选择第二个下拉列表，第三个下拉列表将被过滤，第四个下拉列表将根据第四个下拉列表填充编辑视图。但当我返回并更改第一个下拉列表中的选择时，它会过滤第二个下拉列表，但不会重置第三个、第四个下拉列表和“编辑局部视图”。这是第一个dropdwon部分视图代码

CampusUsercontrol.cshtml

@model RHMS.Models.RoomEditor
@using (Ajax.BeginForm("SelectCampus", "RoomEditor", new AjaxOptions { UpdateTargetId  = "Buildings" }))
{ 
@Html.DropDownListFor(
        m => m.SelectedCampusID,
        new SelectList(Model.Campuses,"CampusId", "Name"),
       string.Empty
    )
}

<script type="text/javascript">

$('#SelectedCampusID').change(function () {
    $(this).parents('form').submit();

 });
</script>

@model RHMS.Models.RoomEditor
@使用（Ajax.BeginForm（“SelectCampus”、“RoomEditor”、新的AjaxOptions{UpdateTargetId=“Buildings”}））
{ 
@Html.DropDownListFor(
m=>m.SelectedCampusID，
新的选择列表（Model.Campuses，“CampusId”，“Name”），
字符串。空
)
}
$（'#SelectedCampusID'）。更改（函数（）{
$（this.parents（'form'）.submit（）；
});

Index.cshtml

 @model RHMS.Models.RoomEditor
 @{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
 }
   <table cellpadding="0" cellspacing="4" border="0">
<tr>
    <td>Campus </td>
    <td> :</td>
    <td>@Html.Partial("CampusUserControl", Model)</td>
</tr>
<tr>
    <td>Building </td>
    <td> :</td>
    <td><div id="Buildings">@Html.Partial("BuildingUserControl", Model)</div></td>
</tr>
<tr>
    <td>Floor </td>
    <td> :</td>
    <td><div id="Floor">@Html.Partial("FloorsUserControl", Model)</div></td>
</tr>
 <tr>
    <td>Room </td>
    <td> :</td>
    <td><div id="Room">@Html.Partial("RoomUserControl", Model)</div></td>
</tr>
</table>
<div id="RoomInfo">
@Html.Partial("RoomInfoUserControl", Model)
</div>

@model RHMS.Models.RoomEditor
@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
校园
:
@Html.Partial（“CampuUserControl”，模型）
建筑
:
@Html.Partial（“BuildingUserControl”，模型）
地板
:
@Html.Partial（“FloorsUserControl”，模型）
房间
:
@Html.Partial（“RoomUserControl”，模型）
@Html.Partial（“RoomInfoUserControl”，模型）

---

请帮助我如何在更改第一个部分视图时刷新其他部分视图。

这部分javascript代码似乎只在第一次加载页面时执行

<script type="text/javascript">

$('#SelectedCampusID').change(function () {
    $(this).parents('form').submit();

 });
</script>

$（'#SelectedCampusID'）。更改（函数（）{
$（this.parents（'form'）.submit（）；
});

---

尝试使用Jquery的绑定为

#SelectedCampusID

连接

更改事件。您可能还必须对其他下拉列表执行相同的操作。
您是如何连接更改事件的？