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