关闭

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

400人阅读 评论(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网站的观点或立场

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

1:前台js文件:
  • make1828
  • make1828
  • 2014-10-15 11:10
  • 7279

省份城市列表XML

  • 2014-10-22 15:52
  • 47KB
  • 下载

全国省市xml文件

  • 2016-04-12 13:44
  • 17KB
  • 下载

最新的省市区数据xml格式

  • 2016-03-21 14:10
  • 227KB
  • 下载

省市县三级联动xml

<?xml version="1.0" encoding="UTF-8"?> <citylist> <p p_id = "01"> <pn>北京</pn> ...
  • Mr_chenhao
  • Mr_chenhao
  • 2016-11-07 10:21
  • 517

JS解析XML--实现省市县级联

JS解析省市区级联XML文件代码附上://1.开始读取xml文件 var xmlDoc = checkXMLDocObj('../js/font/province_data.xml');//读取到xml文件中的数据 //2. 首先对xml对象进行判断 function checkXM...
  • qq_16559905
  • qq_16559905
  • 2016-03-16 19:51
  • 4099

省市区xml文档

  • 2013-07-16 10:31
  • 174KB
  • 下载

省市区xml 本地列表

  • 2016-08-23 10:48
  • 204KB
  • 下载

xml和json的选择

xml&json的战争中,大致可以分出两个对立阵营,一方认为json足够强大可以取代xml;另一方认为json滑稽又丑陋,完全没有和xml角逐的可能。为了避免“拉仇恨”(本人不是mt),笔者就不对json&xml谁强谁弱表态了,只是分析一下xml&json的典型应用场景。 ...
  • mvc360
  • mvc360
  • 2014-08-12 17:18
  • 983

全国省市xml文件

<?xml version="1.0" encoding="utf-8"?> <cities> <province name="北京"> ...
  • colourfulwhite
  • colourfulwhite
  • 2016-04-04 14:37
  • 1507
    个人资料
    • 访问:90688次
    • 积分:1671
    • 等级:
    • 排名:千里之外
    • 原创:73篇
    • 转载:49篇
    • 译文:0篇
    • 评论:20条
    文章分类
    最新评论