我有三个下拉列表。城市下拉列表的第一个操作方法是---
public ActionResult Create()
{
List<SelectListItem> li = new List<SelectListItem>();
li.Add(new SelectListItem { Text = "Select your City", Value = "----" });
li.Add(new SelectListItem { Text = "Faridabaad", Value = "Faridabaad" });
li.Add(new SelectListItem { Text = "Greater Noida", Value = "Greater Noida" });
li.Add(new SelectListItem { Text = "Gurgaon", Value = "Gurgaon" });
li.Add(new SelectListItem { Text = "Noida", Value = "Noida" });
li.Add(new SelectListItem { Text = "New Delhi", Value = "New Delhi" });
ViewData["City"] = li;
return View();
}
然后我的“地点”下拉列表的操作方法会随着我们更改城市名称而变化，如下所示------
public JsonResult LoadLocalities(string id)
{
List<SelectListItem> localities = new List<SelectListItem>();
switch(id)
{
case"New Delhi":
localities.Add(new SelectListItem { Text = "Select your locality", Value = "0" });
localities.Add(new SelectListItem{ Text ="East Delhi", Value = "1" });
localities.Add(new SelectListItem{ Text ="West Delhi", Value = "2" });
localities.Add(new SelectListItem{ Text ="North Delhi", Value = "3" });
localities.Add(new SelectListItem { Text = "South Delhi", Value = "4" });
break;
}
return Json(new SelectList(localities, "Value", "Text"));
}
最后一个随着地点名称变化而变化的子地点下拉菜单的操作方法是这样的---
public JsonResult LoadSubLocalities(string id)
{
List<SelectListItem> sublocalities = new List<SelectListItem>();
switch (id)
{
case"1":
sublocalities.Add(new SelectListItem { Text = "Select your sublocality", Value = "0" });
sublocalities.Add(new SelectListItem { Text = "Region1", Value = "1" });
sublocalities.Add(new SelectListItem { Text = "Region2", Value = "2" });
break;
}
return Json(new SelectList(sublocalities, "Value", "Text"));
}
现在查看页面是这样的------
<!DOCTYPE html>
<head>
<title></title>
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
<div id="map_canvas" style="width: 800px; height: 700px; float:left"></div>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Enter the Project Details</legend>
<div class="editor-label">
@Html.LabelFor(model => model.City)
</div>
<div class="editor-field">
@if (ViewData.ContainsKey("City")){
@Html.DropDownListFor(model => model.City, ViewData["City"] as List<SelectListItem>, new { style = "width:250px", @class = "DropDown1"})
@Html.ValidationMessageFor(model => model.City)
}
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Locality)
</div>
<div class="editor-field">
@Html.DropDownList("Locality", new SelectList(string.Empty,"Value","Text"),"Please Select a locality", new { style = "width:250px", @class = "DropDown1" })
@Html.ValidationMessageFor(model => model.Locality)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.SubLocality)
</div>
<div class="editor-field">
@Html.DropDownList("SubLocality", new SelectList(string.Empty, "Value", "Text"), "Please Select a sub locality", new { style = "width:250px", @class = "DropDown1" })
@Html.ValidationMessageFor(model => model.SubLocality)
</div>
<p>
<input type="submit" value="Save Project" />
</p>
</fieldset>
现在我的javaScript代码是这样的，我编写了代码从 Controller 获取城市，然后随着城市名称的更改而更改位置，并随着位置名称的更改而更改子位置名称-----
<script type="text/javascript">
$(document).ready(function () {
$("#City").change(function () {
$("#Locality").empty();
$.ajax({
type: 'POST',
url: '@Url.Action("LoadLocalities","Project")',
dataType: 'json',
data: { id: $("#City").val() },
success: function (localities) {
$.each(localities, function (i, locality) {
$("#Locality").append('<option value="' + locality.Value + '">' +
locality.Text + '</option>');
});
},
error: function (ex) {
alert('Failed to retreive Locality.' + ex);
}
});
return false;
})
$("#Locality").change(function () {
$("#SubLocality").empty();
$.ajax({
type: 'POST',
url: '@Url.Action("LoadSubLocalities")',
dataType: 'Json',
data: { id: $("Locality").val() },
success: function (sublocalities) {
$.each(sublocalities, function (i, sublocality) {
$("#SubLocality").append('<option value="' + sublocality.Value + '">' +
sublocality.Text + '</option>');
});
},
error: function (ex) {
alert('Failed to retrieve SubLocality.' + ex);
}
});
return false;
})
});
</script>
}
现在，我的问题是，我的地区在更改城市名称时工作正常，但子地区下拉列表不适用于地区名称的更改---
最佳答案
你的原因$("#Locality").change(function () {不起作用是因为以下行
data: { id: $("Locality").val() },
返回undefined 。必须是
data: { id: $("#Locality").val() }, // add hash
但是正确的方法是使用
data: { id: $(this).val() },
为了避免再次遍历DOM来获取 id="Locality" 的元素
您的代码还有许多其他问题，特别是在验证和返回 View if ModelState 方面。无效
- 生成
List<SelectListItem>时，不添加标签选项 (即sublocalities.Add(new SelectListItem { Text = "Select your sublocality", Value = "0" });)。您正在给标签选项一个 值意味着它始终有效。按照目前的情况，您可以 以及删除@Html.ValidationMessageFor()有关联 每个下拉菜单。 - 切勿给出
SelectList与您的属性(property)名称相同 绑定(bind)到(在您的情况下City) - 在您的
LoadLocalities()中和LoadSubLocalities()方法你 首先创建List<SelectListItem>然后创建一个新的SelectList(即IEnumerable<SelectListItem>)所以它只是 不必要的额外开销。无论如何，客户并不知情 什么是 C# 类，而您只返回两倍的数据 根据需要跨过电线(Selected、Disabled和Group您从未使用过的属性)。相反，只需传回一个 包含 2 个属性的匿名对象的集合(对于 选项值和文本)
关于javascript - 级联下拉列表(SubLocality)在 asp.net mvc 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31525823/