通过XML文件实现省份、城市、区域三级联动
来源:互联网 发布:网络金融互助平台 编辑:程序博客网 时间:2024/04/28 14:52
1:前台js文件:<script type="text/javascript">$(document).ready(function () {GetDataList("#Provinces", 0, "Provinces");$("#Provinces").change(function () {GetDataList("#Cities", $("#Provinces").val(), "Cities");});$("#Cities").change(function () {GetDataList("#Districts", $("#Cities").val(), "Districts");});$("#btnGet").click(function () {alert($("#Provinces").val() + "--" + $("#Provinces option:selected").text());});});function GetDataList(ddlId, id, action, selId) {$.getJSON("tools/SelectAjax.ashx", { action: action, id: id, rnd: Math.random() }, function (data) {$(ddlId).empty();$("<option value=\"-1\">不限</option>").appendTo($(ddlId));$.each(data, function (i, item) {$("<option></option>").val(item.CityId).attr("selected", item.CityId == selId).text(item.CityName).appendTo($(ddlId));});});}</script>2:前台html代码:<div> <select id="Provinces" name="Provinces"> <option value="-1">不限</option> </select> <select id="Cities" name="Cities"> <option value="-1">不限</option> </select> <select id="Districts" name="Districts"> <option value="-1">不限</option> </select> <input id="btnGet" name="btnGet" type="button" value="Get" /> </div>3:后台代码:public class SelectAjax : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; var action = context.Request.QueryString["action"]; var id = context.Request.QueryString["id"]; if (string.IsNullOrEmpty(id)) context.Response.Write(""); switch (action) { case "Provinces": context.Response.Write(GetProvinces()); break; case "Cities": context.Response.Write(GetCities(id)); break; case "Districts": context.Response.Write(GetDistricts(id)); break; default: context.Response.Write(""); break; } } /// <summary> /// 获取省份集合 /// </summary> /// <returns></returns> private string GetProvinces() { var xdoc = new XmlDocument(); xdoc.Load(HttpContext.Current.Server.MapPath("Provinces.xml")); //加载Xml文件 var provElem = xdoc.DocumentElement; //获取根节点 if (provElem == null) return null; var provincesNodes = provElem.GetElementsByTagName("Province"); //获取Provinces子节点集合 var listArea= (from object node in provincesNodes let provId = ((XmlElement) node).GetAttribute("ID") let provName = ((XmlElement) node).GetAttribute("ProvinceName") select new Area() { CityId = provId, CityName = provName }).ToList(); return Serialize(listArea); } /// <summary> /// 通过省份ID获取对应的城市 /// </summary> /// <param name="provinceId">省份ID</param> /// <returns></returns> private string GetCities(string provinceId) { var xdoc = new XmlDocument(); xdoc.Load(HttpContext.Current.Server.MapPath("Cities.xml")); //加载Xml文件 var citieElem = xdoc.DocumentElement; //获取根节点 if (citieElem == null) return null; var citieNodes = citieElem.GetElementsByTagName("City"); //获取Cities子节点集合 var listArea = (from object node in citieNodes let citId = ((XmlElement)node).GetAttribute("ID") let citName = ((XmlElement)node).GetAttribute("CityName") let pid = ((XmlElement)node).GetAttribute("PID") where pid == provinceId select new Area() { CityId = citId, CityName = citName }).ToList(); return Serialize(listArea); } /// <summary> /// 通过城市ID获取区域 /// </summary> /// <param name="citieId">城市ID</param> /// <returns></returns> private string GetDistricts(string citieId) { var xdoc = new XmlDocument(); xdoc.Load(HttpContext.Current.Server.MapPath("Districts.xml")); //加载Xml文件 var districtElem = xdoc.DocumentElement; //获取根节点 if (districtElem == null) return null; var citieNodes = districtElem.GetElementsByTagName("District"); //获取Districts子节点集合 var listArea = (from object node in citieNodes let distrId = ((XmlElement)node).GetAttribute("ID") let distrName = ((XmlElement)node).GetAttribute("DistrictName") let cid = ((XmlElement)node).GetAttribute("CID") where cid == citieId select new Area() { CityId = distrId, CityName = distrName }).ToList(); return Serialize(listArea); } /// <summary> /// Json序列化 /// </summary> /// <typeparam name="T">泛型</typeparam> /// <param name="t">泛型</param> /// <returns>序列化</returns> private string Serialize(object obj) { JavaScriptSerializer js = new JavaScriptSerializer(); return js.Serialize(obj); } /// <summary> /// Json反序列化 /// </summary> /// <typeparam name="T">泛型</typeparam> /// <param name="strJson">泛型</param> /// <returns>反序列化</returns> private T Deserialize<T>(string strJson) { JavaScriptSerializer js = new JavaScriptSerializer(); return js.Deserialize<T>(strJson); } public class Area { //城市ID public string CityId { get; set; } //城市名称 public string CityName { get; set; } } public bool IsReusable { get { return false; } } }
0 0
- 通过XML文件实现省份、城市、区域三级联动
- 通过XML文件实现省份、城市、区域三级联动
- 省份城市三级联动
- 通过城市找省份 城市 地市 三级联动 大概代码
- AJAX完成三级级下拉联动【省份-城市-区域】
- 省份-城市-区域三级联动【Struts2 + JSON版】
- 基于Jquery实现省份、城市、区县三级联动
- 在线解析xml文件. 实现城市三级联动
- asp 省份、城市、城镇三级联动
- javascript 省份城市地区三级联动菜单
- 三级联动效果 ,省份,城市,市区
- AJAX应用案例--基于mysql,以POST方式,完成三级级下拉联动【省份-城市-区域】
- JQuery应用案例--JQuery-MySql版:城市省份区域-三级联动
- 【js】使用xml数据载体实现城市省份二级联动
- ionic+AngularJs项目中实现三级联动效果,筛选省份、城市、区县
- 省份城市二级联动【DOM+js+XML】
- 城市三级联动功能实现
- jQuery实现三级城市联动
- 把网页加载进安卓显示,及其android系统webview控件使用详解
- iOS SDK 集成指南
- Android的一些面试题目
- keeplearning swift-柯里化
- oracle sql 将字符串转换成多行
- 通过XML文件实现省份、城市、区域三级联动
- Python数据类型
- mysql问题汇总
- Android修改状态栏颜色 布局错乱问题解决
- JRebel 实现热部署
- 四大组件之Activity
- Python print语句
- JS 设置下拉列表的值(设置选中项)
- 最全PHP防止sql注入方法