关闭

通过XML文件实现省份、城市、区域三级联动

217人阅读 评论(0) 收藏 举报
分类:
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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:39696次
    • 积分:1169
    • 等级:
    • 排名:千里之外
    • 原创:72篇
    • 转载:48篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论