利用Jquery实现级联省份

最新推荐文章于 2021-03-06 17:18:12 发布

iteye_6481

最新推荐文章于 2021-03-06 17:18:12 发布

阅读量169

点赞数

文章标签： javascript json ViewUI

本文详细介绍了如何在后台通过代码获取中国所有省份和城市的数据，并将其转换为JSON格式，然后在前台使用JavaScript进行动态加载和展示。包括了后台数据获取逻辑、JSON数据生成及前台DOM操作实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台：

#region [属性省份、城市]
//中国所有省份
List<Byecity2011.WebSite.Model.Web_UserProvince> provinceTable;
protected List<Byecity2011.WebSite.Model.Web_UserProvince> ProvinceTable
{
get
{
if (provinceTable == null)
{
provinceTable = province.GetAllUserProvince();
}
return provinceTable;
}
}
//获取所有城市的JSON
private string mJsonCity = string.Empty;
protected string JsonCity
{
get
{
List<Byecity2011.WebSite.Model.Web_UserCity> CityTable = province.GetAllUserCity();
if (CityTable == null) return "var jsonCity = null";
string[] sArrJson = new string[CityTable.Count];
int i = 0;
foreach (Byecity2011.WebSite.Model.Web_UserCity usercity in CityTable)
{
sArrJson[i] = "{name: \"" + usercity.Name.ToString() + "\",id: \"" + usercity.ID + "\",pid:\"" + usercity.ProvinceID + "\"}";
i = i + 1;
}
return "var jsonCity = [" + string.Join(",", sArrJson) + "];";
}
}
#endregion

前台

ddlProvince.change(function() {
var arrHtml = new Array();
if (this.value == "0") {
ddlCity.attr("disabled", "disabled");
ddlCity.html("<option value='0'>-请选择-</option>");
return;
}
ddlCity.removeAttr("disabled");
arrHtml.push("<option value='0'>-请选择-</option>");
for (var i = 0; i < jsonCity.length; ++i) {
if (this.value == jsonCity[i].pid) {
arrHtml.push("<option value='" + jsonCity[i].id + "'>" + jsonCity[i].name + "</option>");
}
}
ddlCity.html(arrHtml.join(''));
});