XML:使用DOM技术解析xML文件中的城市,实现select级联选择

中国的城市xml格式:cities.xml

xml version="1.0" encoding="utf-8"?>
<china>

    <province name="北京">
        <city>东城区city>
        <city>西城区city>
        <city>崇文区city>
        <city>宣武区city>
        <city>朝阳区city>
        <city>丰台区city>
        <city>石景山区city>
        <city>海淀区city>
        <city>门头沟区city>
        <city>房山区city>
        <city>通州区city>
        <city>顺义区city>
        <city>昌平区city>
        <city>大兴区city>
        <city>怀柔区city>
        <city>平谷区city>
        <city>密云县city>
        <city>延庆县city>
    province>

    <province name="天津">
        <city>和平区city>
        <city>河东区city>
        <city>河西区city>
        <city>南开区city>
        <city>河北区city>
        <city>红桥区city>
        <city>塘沽区city>
        <city>汉沽区city>
        <city>大港区city>
        <city>东丽区city>
        <city>西青区city>
        <city>津南区city>
        <city>北辰区city>
        <city>武清区city>
        <city>宝坻区city>
        <city>宁河县city>
        <city>静海县city>
        <city>蓟县city>
    province>

    <province name="河北">
        <city>石家庄city>
        <city>唐山city>
        <city>秦皇岛city>
        <city>邯郸city>
        <city>邢台city>
        <city>保定city>
        <city>张家口city>
        <city>承德city>
        <city>沧州city>
        <city>廊坊city>
        <city>衡水city>
    province>

    <province name="山西">
        <city>太原city>
        <city>大同city>
        <city>阳泉city>
        <city>长治city>
        <city>晋城city>
        <city>朔州city>
        <city>晋中city>
        <city>运城city>
        <city>忻州city>
        <city>临汾city>
        <city>吕梁city>
    province>

    <province name="内蒙古">
        <city>呼和浩特city>
        <city>包头city>
        <city>乌海city>
        <city>赤峰city>
        <city>通辽city>
        <city>鄂尔多斯city>
        <city>呼伦贝尔city>
        <city>巴彦淖尔city>
        <city>乌兰察布city>
        <city>兴安盟city>
        <city>锡林郭勒盟city>
        <city>阿拉善盟city>
    province>

    <province name="辽宁">
        <city>沈阳city>
        <city>大连city>
        <city>鞍山city>
        <city>抚顺city>
        <city>本溪city>
        <city>丹东city>
        <city>锦州city>
        <city>营口city>
        <city>阜新city>
        <city>辽阳city>
        <city>盘锦city>
        <city>铁岭city>
        <city>朝阳city>
        <city>葫芦岛city>
    province>

    <province name="吉林">
        <city>长春city>
        <city>吉林city>
        <city>四平city>
        <city>辽源city>
        <city>通化city>
        <city>白山city>
        <city>松原city>
        <city>白城city>
        <city>延边city>
    province>

    <province name="黑龙江">
        <city>哈尔滨city>
        <city>齐齐哈尔city>
        <city>鸡西city>
        <city>鹤岗city>
        <city>双鸭山city>
        <city>大庆city>
        <city>伊春city>
        <city>佳木斯city>
        <city>七台河city>
        <city>牡丹江city>
        <city>黑河city>
        <city>绥化city>
        <city>大兴安岭city>
    province>

    <province name="上海">
        <city>黄浦区city>
        <city>卢湾区city>
        <city>徐汇区city>
        <city>长宁区city>
        <city>静安区city>
        <city>普陀区city>
        <city>闸北区city>
        <city>虹口区city>
        <city>杨浦区city>
        <city>闵行区city>
        <city>宝山区city>
        <city>嘉定区city>
        <city>浦东新区city>
        <city>金山区city>
        <city>松江区city>
        <city>青浦区city>
        <city>南汇区city>
        <city>奉贤区city>
        <city>崇明县city> 
    province>

    <province name="江苏">
        <city>南京city>
        <city>无锡city>
        <city>徐州city>
        <city>常州city>
        <city>苏州city>
        <city>南通city>
        <city>连云港city>
        <city>淮安city>
        <city>盐城city>
        <city>扬州city>
        <city>镇江city>
        <city>泰州city>
        <city>宿迁city>
    province>

    <province name="浙江">
        <city>杭州city>
        <city>宁波city>
        <city>温州city>
        <city>嘉兴city>
        <city>湖州city>
        <city>绍兴city>
        <city>金华city>
        <city>衢州city>
        <city>舟山city>
        <city>台州city>
        <city>丽水city>
    province>

    <province name="安徽">
        <city>合肥city>
        <city>芜湖city>
        <city>蚌埠city>
        <city>淮南city>
        <city>马鞍山city>
        <city>淮北city>
        <city>铜陵city>
        <city>安庆city>
        <city>黄山city>
        <city>滁州city>
        <city>阜阳city>
        <city>宿州city>
        <city>巢湖city>
        <city>六安city>
        <city>亳州city>
        <city>池州city>
        <city>宣城city>
    province>

    <province name="福建">
        <city>福州city>
        <city>厦门city>
        <city>莆田city>
        <city>三明city>
        <city>泉州city>
        <city>漳州city>
        <city>南平city>
        <city>龙岩city>
        <city>宁德city>
    province>

    <province name="江西">
        <city>南昌city>
        <city>景德镇city>
        <city>萍乡city>
        <city>九江city>
        <city>新余city>
        <city>鹰潭city>
        <city>赣州city>
        <city>吉安city>
        <city>宜春city>
        <city>抚州city>
        <city>上饶city>
    province>

    <province name="山东">
        <city>济南city>
        <city>青岛city>
        <city>淄博city>
        <city>枣庄city>
        <city>东营city>
        <city>烟台city>
        <city>潍坊city>
        <city>济宁city>
        <city>泰安city>
        <city>威海city>
        <city>日照city>
        <city>莱芜city>
        <city>临沂city>
        <city>德州city>
        <city>聊城city>
        <city>滨州city>
        <city>荷泽city>
    province>

    <province name="河南">
        <city>郑州city>
        <city>开封city>
        <city>洛阳city>
        <city>平顶山city>
        <city>安阳city>
        <city>鹤壁city>
        <city>新乡city>
        <city>焦作city>
        <city>濮阳city>
        <city>许昌city>
        <city>漯河city>
        <city>三门峡city>
        <city>南阳city>
        <city>商丘city>
        <city>信阳city>
        <city>周口city>
        <city>驻马店city>
    province>

    <province name="湖北">
        <city>武汉city>
        <city>黄石city>
        <city>十堰city>
        <city>宜昌city>
        <city>襄樊city>
        <city>鄂州city>
        <city>荆门city>
        <city>孝感city>
        <city>荆州city>
        <city>黄冈city>
        <city>咸宁city>
        <city>随州city>
        <city>恩施city>
        <city>神农架city>
    province>

    <province name="湖南">
        <city>长沙city>
        <city>株洲city>
        <city>湘潭city>
        <city>衡阳city>
        <city>邵阳city>
        <city>岳阳city>
        <city>常德city>
        <city>张家界city>
        <city>益阳city>
        <city>郴州city>
        <city>永州city>
        <city>怀化city>
        <city>娄底city>
        <city>湘西city>
    province>

    <province name="广东">
        <city>广州city>
        <city>韶关city>
        <city>深圳city>
        <city>珠海city>
        <city>汕头city>
        <city>佛山city>
        <city>江门city>
        <city>湛江city>
        <city>茂名city>
        <city>肇庆city>
        <city>惠州city>
        <city>梅州city>
        <city>汕尾city>
        <city>河源city>
        <city>阳江city>
        <city>清远city>
        <city>东莞city>
        <city>中山city>
        <city>潮州city>
        <city>揭阳city>
        <city>云浮city>
    province>

    <province name="广西">
        <city>南宁city>
        <city>柳州city>
        <city>桂林city>
        <city>梧州city>
        <city>北海city>
        <city>防城港city>
        <city>钦州city>
        <city>贵港city>
        <city>玉林city>
        <city>百色city>
        <city>贺州city>
        <city>河池city>
        <city>来宾city>
        <city>崇左city>
    province>

    <province name="海南">
        <city>海口city>
        <city>三亚city>
    province>

    <province name="重庆">
        <city>重庆city>
        <city>万州区city>
        <city>涪陵区city>
        <city>渝中区city>
        <city>大渡口区city>
        <city>江北区city>
        <city>沙坪坝区city>
        <city>九龙坡区city>
        <city>南岸区city>
        <city>北碚区city>
        <city>万盛区city>
        <city>双桥区city>
        <city>渝北区city>
        <city>巴南区city>
        <city>黔江区city>
        <city>长寿区city>
        <city>綦江县city>
        <city>潼南县city>
        <city>铜梁县city>
        <city>大足县city>
        <city>荣昌县city>
        <city>璧山县city>
        <city>梁平县city>
        <city>城口县city>
        <city>丰都县city>
        <city>垫江县city>
        <city>武隆县city>
        <city>忠县city>
        <city>开县city>
        <city>云阳县city>
        <city>奉节县city>
        <city>巫山县city>
        <city>巫溪县city>
        <city>石柱土家族自治县city>
        <city>秀山土家族苗族自治县city>
        <city>酉阳土家族苗族自治县city>
        <city>彭水苗族土家族自治县city>
        <city>江津city>
        <city>合川city>
        <city>永川city>
        <city>南川city>
    province>

    <province name="四川">
        <city>成都city>
        <city>自贡city>
        <city>攀枝花city>
        <city>泸州city>
        <city>德阳city>
        <city>绵阳city>
        <city>广元city>
        <city>遂宁city>
        <city>内江city>
        <city>乐山city>
        <city>南充city>
        <city>眉山city>
        <city>宜宾city>
        <city>广安city>
        <city>达州city>
        <city>雅安city>
        <city>巴中city>
        <city>资阳city>
        <city>阿坝city>
        <city>甘孜city>
        <city>凉山city>
    province>

    <province name="贵州">
        <city>贵阳city>
        <city>六盘水city>
        <city>遵义city>
        <city>安顺city>
        <city>铜仁city>
        <city>黔西南city>
        <city>毕节city>
        <city>黔东南city>
        <city>黔南city>
    province>

    <province name="云南">
        <city>昆明city>
        <city>曲靖city>
        <city>玉溪city>
        <city>保山city>
        <city>昭通city>
        <city>丽江city>
        <city>思茅city>
        <city>临沧city>
        <city>楚雄city>
        <city>红河city>
        <city>文山city>
        <city>西双版纳city>
        <city>大理city>
        <city>德宏city>
        <city>怒江city>
        <city>迪庆city>
    province>

    <province name="西藏">
        <city>拉萨city>
        <city>昌都city>
        <city>山南city>
        <city>日喀则city>
        <city>那曲city>
        <city>阿里city>
        <city>林芝city>
    province>

    <province name="陕西">
        <city>西安city>
        <city>铜川city>
        <city>宝鸡city>
        <city>咸阳city>
        <city>渭南city>
        <city>延安city>
        <city>汉中city>
        <city>榆林city>
        <city>安康city>
        <city>商洛city>
    province>

    <province name="甘肃">
        <city>兰州city>
        <city>嘉峪关city>
        <city>金昌city>
        <city>白银city>
        <city>天水city>
        <city>武威city>
        <city>张掖city>
        <city>平凉city>
        <city>酒泉city>
        <city>庆阳city>
        <city>定西city>
        <city>陇南city>
        <city>临夏city>
        <city>甘南city>
    province>

    <province name="青海">
        <city>西宁city>
        <city>海东city>
        <city>海北city>
        <city>黄南city>
        <city>海南city>
        <city>果洛city>
        <city>玉树city>
        <city>海西city>
    province>

    <province name="宁夏">
        <city>银川city>
        <city>石嘴山city>
        <city>吴忠city>
        <city>固原city>
        <city>中卫city>
    province>

    <province name="新疆">
        <city>乌鲁木齐city>
        <city>克拉玛依city>
        <city>吐鲁番city>
        <city>哈密city>
        <city>昌吉city>
        <city>博尔塔拉city>
        <city>巴音郭楞city>
        <city>阿克苏city>
        <city>克孜勒苏city>
        <city>喀什city>
        <city>和田city>
        <city>伊犁city>
        <city>塔城city>
        <city>阿勒泰city>
        <city>石河子city>
        <city>阿拉尔city>
        <city>图木舒克city>
        <city>五家渠city>
    province>

    <province name="香港">
        <city>香港city>
    province>

    <province name="澳门">
        <city>澳门city>
    province>

    <province name="台湾">
        <city>台湾city>
    province>
    
china>
View Code

下面,使用DOM解析xML文件中的城市,实现select级联选择

最基本的方法:selecCity.html




    
    使用DOM解析city.xml,进行城市二级级联操作


    



    中国城市二级级联选择

其实,还有一个更简单的方法,使用XPath技术,下面的实现效果是一样哟:selecCity2.html




    
    使用DOM解析city.xml,进行城市二级级联操作


    



    中国城市二级级联选择

拓展:判断浏览器类型,这儿还给出判断一个浏览器的方法:

//判断浏览器
function myBrowser(){
     //取得浏览器的userAgent字符串
     var explorer = window.navigator.userAgent ; 
     //iE
     if (explorer.indexOf("MSIE") > -1 && explorer.indexOf("compatible") > -1 && !explorer.indexOf("Opera")) { 
           return "IE";
     }
     //firefox 
     else if (explorer.indexOf("Firefox") > -1) {
           return "Firefox";
     }
     //Chrome
     else if(explorer.indexOf("Chrome") > -1){
           return "Chrome";
     }
     //Opera
     else if(explorer.indexOf("Opera") > -1){
           return "Opera";
     }
     //Safari
     else if(explorer.indexOf("Safari") > -1){
           return "Safari";
     }
}

 

效果图显示:

XML:使用DOM技术解析xML文件中的城市,实现select级联选择_第1张图片 XML:使用DOM技术解析xML文件中的城市,实现select级联选择_第2张图片

 

转载于:https://www.cnblogs.com/XYQ-208910/p/5871439.html

你可能感兴趣的:(XML:使用DOM技术解析xML文件中的城市,实现select级联选择)