<script type="text/javascript"> $(document).ready(function () { GetDataList("#Provinces","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; } } }效果截图:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。