我正在使用 MVC4/EF，我有三个级联下拉列表和第四个列表框，它根据第三个下拉列表加载记录。我想选择第一个下拉列表并在第二个下拉列表中过滤结果，然后通过选择第二个 dropdowm 过滤第三个 dropdwon，基于第三个下拉列表填充一个列表框。它仅适用于基于第一个加载记录的第二个下拉列表。但是，当更改第二个下拉菜单中的选择时，它会过滤第三个下拉菜单，即当我更改第二个下拉菜单中的选择时，它不会重置第三个，实际上$("#ddlUsers").change(function () { });当我更改第二个下拉菜单的选择时不会调用。这是我的代码
我的创建视图有这些主要元素
第一个下拉菜单
<div class="editor-field">
@Html.DropDownList("DepartmentId", (SelectList)ViewData["Departments"], "--Select Department--", new { Id = "ddlDepartments" })
@Html.ValidationMessageFor(model => model.DepartmentId)
</div>
第二个下拉菜单
<div id="dvUser" class="editor-field">
@Html.DropDownList("UserId", new SelectList(new[] { "--Select Manager--" }), new { Id = "ddlUsers" })
@Html.ValidationMessageFor(model => model.UserID)
</div>
第三个下拉菜单
<div id="dvLead" class="editor-field">
@Html.DropDownList("UserId", new SelectList(new[] { "--Select Lead--" }), new { Id = "ddlLead" })
@Html.ValidationMessageFor(model => model.LeadID)
</div>
现在是一个列表框
div id="dvEmployees" class="editor-field">
@Html.ListBox("Employees", new MultiSelectList(new[] { "--Select Item--" }), new { id = "sourceItems", Multiple = "multiple" })
@Html.ValidationMessageFor(model => model.DepartmentEmployees)
</div>
我的 JavaScript
<script type="text/javascript">
$(document).ready(function () {
registerPageEvents('@Html.Raw(Url.Action("Create"))', '@Html.Raw(Url.Action("Edit", new { id = "__ID__" }))', 'ID');
$("#ddlDepartments").change(function () {
debugger;
var postParams = { deptId: $("#ddlDepartments").val() };
$.post('@Html.Raw(Url.Action("LoadManagerCombo", "DepartmentManager", new { area = "Administration", Controller = "DepartmentManager" }))' + '/', postParams)
.done(function (newRow) {
$("#dvUser").html(newRow);
})
.fail(function (ex1, ex2, ex3) {
alert("error occured while Loading Manager");
});
});
$("#ddlUsers").change(function () {
debugger;
var postParams = { deptId: $("#ddlDepartments").val(), managerId: $("#ddlUsers").val() };
$.post('@Html.Raw(Url.Action("LoadUserOtherThanMangerCombo", "DepartmentManager", new { area = "Administration", Controller = "DepartmentManager" }))' + '/', postParams)
.done(function (newRow) {
$("#dvLead").html(newRow);
})
.fail(function (ex1, ex2, ex3) {
alert("error occured while Loading Lead");
});
});
$("#ddlLead").change(function () {
debugger;
var postParams = { deptId: $("#ddlDepartments").val(), managerId: $("#ddlUsers").val(), leadId: $("#ddlLead").val() };
$.post('@Html.Raw(Url.Action("LoadEmployeeListBox", "DepartmentManager", new { area = "Administration", Controller = "DepartmentManager" }))' + '/', postParams)
.done(function (newRow) {
$("#dvEmployees").html(newRow);
})
.fail(function (ex1, ex2, ex3) {
alert("error occured while Loading Employees");
});
});
});
我为第二个、第三个下拉列表和第四个（列表框）制作了不同的部分视图
对于第二个
@model CubicHRM.Data.Entities.Employee
@Html.DropDownList("UserId", (SelectList)ViewData["Manager"], "--Select Manager/Head--", new { Id = "ddlUsers" })
带控制器功能
[HttpPost]
public ActionResult LoadManagerCombo(int deptId)
{
List<int> ManagerIds = db.DepartmentManagerRepository.Get().Select(u => u.UserID).ToList();
List<int> LeadIds = db.DepartmentManagerRepository.Get().Select(u => u.LeadID).ToList();
ViewData["Manager"] = new SelectList(db.UsersRepository.Get().Where(u => u.DepartmentID == deptId && !ManagerIds.Contains(u.UserId) && !LeadIds.Contains(u.UserId)).ToList(), "UserId", "UserName");
return PartialView();
}
第三个
@model CubicHRM.Data.Entities.Employee
@Html.DropDownList("UserId", (SelectList)ViewData["Lead"], "--Select Lead--", new { Id = "ddlLead" })
用动作方法
[HttpPost]
public ActionResult LoadUserOtherThanMangerCombo(int deptId, int managerId)
{
List<int> ManagerIds = db.DepartmentManagerRepository.Get().Select(u => u.UserID).ToList();
List<int> LeadIds = db.DepartmentManagerRepository.Get().Select(u => u.LeadID).ToList();
ViewData["Lead"] = new SelectList(db.UsersRepository.Get().Where(u => u.UserId != managerId && u.DepartmentID == deptId && !ManagerIds.Contains(u.UserId) && !LeadIds.Contains(u.UserId)).ToList(), "UserId", "UserName");
return PartialView();
}
现在是列表框
@model CubicHRM.Data.Entities.Employee
@Html.ListBox("Employees", new MultiSelectList((IEnumerable<CubicHRM.Data.Entities.Employee>)(ViewData["Employees"]), "UserID", "UserName"), new { id = "sourceItems", Multiple = "multiple" })
用动作方法
[HttpPost]
public ActionResult LoadEmployeeListBox(int deptId, int managerId, int leadId)
{
List<int> ManagerIds = db.DepartmentManagerRepository.Get().Select(u => u.UserID).ToList();
List<int> LeadIds = db.DepartmentManagerRepository.Get().Select(u => u.LeadID).ToList();
ViewData["Employees"] = new SelectList(db.UsersRepository.Get().Where(u => u.UserId != managerId && u.DepartmentID == deptId && u.UserId != leadId && !ManagerIds.Contains(u.UserId) && !LeadIds.Contains(u.UserId)).ToList(), "UserId", "UserName");
return PartialView();
}
有人可以告诉我为什么我无法在第三个下拉列表和第四个（列表框）中加载记录。当我调试它甚至不调用
$("#ddlUsers").change(function () {
debugger;
var postParams = { deptId: $("#ddlDepartments").val(), managerId: $("#ddlUsers").val() };
$.post('@Html.Raw(Url.Action("LoadUserOtherThanMangerCombo", "DepartmentManager", new { area = "Administration", Controller = "DepartmentManager" }))' + '/', postParams)
.done(function (newRow) {
$("#dvLead").html(newRow);
})
.fail(function (ex1, ex2, ex3) {
alert("error occured while Loading Lead");
});
});
我不知道为什么？任何人都可以在这件事上帮助我吗？
更新
我刚刚 $("#ddlUsers").change(function () { }); 在为加载下拉列表创建的部分视图中移动了代码， 'ddlUsers' 现在我可以加载 'ddlLead' 下拉列表了。但是当我点击第三个下拉菜单时，这再次失败，即ddllead。函数 $("#ddlLead").change(function () { }); 没有被调用，怎么回事？为什么回传技巧只适用于一个控件？