通过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
原创粉丝点击