ASP.Net MVC 6 级联下拉列表未填充
ASP.Net MVC 6 Cascading Dropdowns Not Populating
我在页面上使用级联下拉菜单。第一个下拉菜单正在从 ViewBag
中填充
@Html.DropDownList("OrgGroupID",
(IEnumerable<SelectListItem>)ViewBag.OrgGroups,
new Dictionary<string, object>
{
{ "class", "form-control" },
{ "width", "100%" },
{ "data-placeholder", "Select Group..." },
{ "onchange", "groupSelected(this)" }
})
当从第一个中选择一个值时,第二个正在填充。第二个下拉菜单的标记是
@Html.ListBox("Devices",
(IEnumerable<SelectListItem>)ViewBag.Devices,
new Dictionary<string, object>
{
{ "id", "devices"},
{ "class", "chosen-select form-control" },
{ "width", "100%" },
{ "data-placeholder", "Select Devices..." }
})
填充第二个下拉列表的jquery函数是
function groupSelected(obj) {
var selectedGroupId = obj.options[obj.selectedIndex].value;
$.ajax({
url: "../Devices/DevicesByGroupId",
type: "GET",
dataType: "JSON",
data: { groupId: selectedGroupId },
success: function (devicesData) {
$("#devices").html("");
$.each(devicesData, function (index, itemData) {
$("#devices").append(
$("<option></option>").val(itemData.Value).html(itemData.Text)
);
});
}
});
}
正在调用的 api 方法执行 returns 数据,但由于某种原因,这些值没有附加到第二个下拉列表中。
请提出我在这里遗漏了什么。
@StephenMuecke 你救了我的伙伴!删除 chose-select class 加载数据。我刚刚发现我必须调用
$("#devices").trigger("chosen:updated");
更新列表框。非常感谢您向我指出这个方向:)
我在页面上使用级联下拉菜单。第一个下拉菜单正在从 ViewBag
中填充@Html.DropDownList("OrgGroupID",
(IEnumerable<SelectListItem>)ViewBag.OrgGroups,
new Dictionary<string, object>
{
{ "class", "form-control" },
{ "width", "100%" },
{ "data-placeholder", "Select Group..." },
{ "onchange", "groupSelected(this)" }
})
当从第一个中选择一个值时,第二个正在填充。第二个下拉菜单的标记是
@Html.ListBox("Devices",
(IEnumerable<SelectListItem>)ViewBag.Devices,
new Dictionary<string, object>
{
{ "id", "devices"},
{ "class", "chosen-select form-control" },
{ "width", "100%" },
{ "data-placeholder", "Select Devices..." }
})
填充第二个下拉列表的jquery函数是
function groupSelected(obj) {
var selectedGroupId = obj.options[obj.selectedIndex].value;
$.ajax({
url: "../Devices/DevicesByGroupId",
type: "GET",
dataType: "JSON",
data: { groupId: selectedGroupId },
success: function (devicesData) {
$("#devices").html("");
$.each(devicesData, function (index, itemData) {
$("#devices").append(
$("<option></option>").val(itemData.Value).html(itemData.Text)
);
});
}
});
}
正在调用的 api 方法执行 returns 数据,但由于某种原因,这些值没有附加到第二个下拉列表中。
请提出我在这里遗漏了什么。
@StephenMuecke 你救了我的伙伴!删除 chose-select class 加载数据。我刚刚发现我必须调用
$("#devices").trigger("chosen:updated");
更新列表框。非常感谢您向我指出这个方向:)