级联下拉菜单
cascading the dropdown menu
这是jquery函数-现在我能够通过城市名称,并将其保存到数据库,但如何改变地方与城市名称的变化。我对jquery一窍不通。无法理解这一行$。getJSON(localityUrl, {ID: $(this).val()}, function (data) {plzzz建议我做一些改变——
<script type="text/javascript">
$(document).ready(function () {
var localityUrl = '@Url.Action("FetchLocalities")';
var localities = $('#SelectedLocality');
$('#SelectedCity').change(function () { localities.empty();
subLocalities.empty();
$.getJSON(localityUrl, { ID: $(this).val() }, function (data) {
if (!data) {
return;
}
localities.append($('<option></option>').val('').text('Please select'));
$.each(data, function (index, item) {
localities.append($('<option></option>').val(item.Value).text(item.Text));
// localities.append($('<option data-lat=' + item.Latitude + ' data-lng=' + item.Longitude + '></option>').text(item.Text));
});
});
})
,我的城市下拉是这样的 ---------
<div class="editor-label">
@Html.LabelFor(model => model.SelectedCity)
</div>
<div class="editor-field">
<select id="SelectedCity" name="SelectedCity">
@foreach (var thisCity in Model.CityList)
{
<option value="@thisCity.Name" data-lat="@thisCity.Latitude" data-long="@thisCity.Longitude" data-name="@thisCity.Name" >@thisCity.Name</option>
}
</select>
@Html.ValidationMessageFor(model => model.SelectedCity)
</div>
和我在服务层的城市是这样的——
public List<City> FetchCities()
{
List<City> cities = new List<City>();
cities.Add(new City() { Id = 1, Name = "--Select Your City--", Latitude = 28.6139M, Longitude = 77.2090M });
cities.Add(new City() { Id = 2, Name = "Faridabaad", Latitude = 28.4211M, Longitude = 77.3078M });
return cities;
}
和我的位置是这样的——
public List<Locality> FetchLocalities()
{
List<Locality> localities = new List<Locality>();
localities.Add(new Locality() { Id = 1, CityName = "Faridabaad", Name = "East Faridabaad" });
localities.Add(new Locality() { Id = 2, CityName = "Faridabaad", Name = "West Faridabaad" });
return localities;
}
现在我的控制器是这样来获取位置的
public JsonResult FetchLocalities(string name)
{
var data = _localityService.FetchLocalities()
//.Where(l => l.CityId == Id)
.Where(l => l.CityName == name)
.Select(l => new { Value = l.CityName, Text = l.Name });
return Json(data, JsonRequestBehavior.AllowGet);
}
localityUrl
是您调用的url -在您的情况下,它将是var localityUrl = '@Url.Action("FetchLocalities", "yourControllerName")';
{ ID: $(this).val() }
是你传递给控制器的数据,在你的情况下,它需要是{ name: $(this).val() }
,因为你的方法有参数string name
(不是ID)和$(this).val()
等于所选选项的值
function (data)
中的和data
是您从控制器方法返回的数据,在您的情况下,包含2个属性的对象集合,Value
和Text
不用$. getjson(),你可以通过ajax调用你的控制器动作,并通过传递所需的参数分别重新加载所有的位置
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- 如何将JSON转换为HTML下拉菜单
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 内联表单的引导下拉菜单自动宽度
- 级联下拉菜单干扰自动完成文本框
- IE7与导航下拉菜单(3级)CSS/Javascript的兼容性问题
- 需要帮助修复3级下拉菜单
- 多个级联下拉菜单与Angular &MVC
- 级联下拉菜单
- 多个级联下拉菜单
- 在Angular JS中,根据级联下拉菜单中选择的值,将嵌套的JSON数据加载到ng-modal弹出框中
- MVC下拉列表级联-如何在第一个ddl选择更改时在第三个ddl上触发事件