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

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;
            }
        }
    }

备注：XML文件请童鞋移步到 xml源文件 进行下载，谢谢!

效果截图：