xml+js+html的二级联动

首先需要准备的文档是:

cities.xml

//主要是标注中国各省及其各省下的各个城市

内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<china>
    <!-- 四大直辖市 -->
    <!-- 北京市、上海市、天津市、重庆市 -->
    <province name="北京市">
        <!--东城区、西城区、崇文区、宣武区、朝阳区、丰台区、石景山区、海淀区、门头沟区、房山区-->
        <!--通州区、顺义区、昌平区、大兴区、怀柔区、平谷区(16个区) -->
        <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>
        <!--密云县、延庆县(2个县) -->
        <city>密云县</city>
        <city>延庆县</city>
    </province>
    <province name="上海市">
        <!-- 黄浦区、卢湾区、徐汇区、长宁区、静安区、普陀区、闸北区、虹口区、杨浦区、闵行区-->
        <!-- 宝山区、嘉定区、浦东新区、金山区、松江区、青浦区、南汇区、奉贤区 (18个区)-->
        <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>
        <!-- 崇明县(1个县) -->
        <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>
        <!-- 蓟县、宁河县、静海县(3个县) -->
        <city>蓟县</city>
        <city>宁河县</city>
        <city>静海县</city>
        <!-- 滨海新区(1个区) -->
        <city>滨海新区</city>
    </province>
    <province name="重庆市">
        <!--渝中区、大渡口区、江北区、沙坪坝区、九龙坡区、南岸区、北碚区、万盛区、双桥区、渝北区-->
        <!--万州区、涪陵区、黔江区、长寿区、江津区、合川区、永川区、南川区、巴南区(19个区) -->
        <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>
    <!-- 23个省 -->
    <!-- 安徽省、福建省、甘肃省、广东省、贵州省、海南省、河北省、河南省、黑龙江省、湖北省 -->
    <!-- 湖南省、吉林省、江苏省、江西省、辽宁省、青海省、山东省、山西省、陕西省、四川省 -->
    <!-- 台湾省 云南省 浙江省 -->
    <province name="安徽省">
        <!-- 合肥市、蚌埠市、芜湖市、淮南市、马鞍山市、淮北市、铜陵市、安庆市、黄山市、阜阳市 -->
        <!-- 宿州市、滁州市、六安市、宣城市、巢湖市、池州市、亳州市(17个市) -->
        <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>
        <!-- 界首市、桐城市 、天长市 、明光市、宁国市(5个直辖县级市) -->
        <city>界首市</city>
        <city>桐城市</city>
        <city>天长市</city>
        <city>明光市</city>
        <city>宁国市</city>
    </province>
    <province name="福建省">
        <!-- 福州市、厦门市、宁德市、莆田市、泉州市、漳州市、龙岩市、三明市、南平市(9市) -->
        <city>福州市</city>
        <city>厦门市</city>
        <city>宁德市</city>
        <city>莆田市</city>
        <city>泉州市</city>
        <city>龙岩市</city>
        <city>漳州市</city>
        <city>三明市</city>
        <city>南平市</city>
    </province>
    <province name="甘肃省">
        <!-- 兰州市、天水市、白银市、平凉市、庆阳市、陇南市、定西市、金昌市、武威市、张掖市、酒泉市、嘉峪关市(12个市) -->
        <city>兰州市</city>
        <city>天水市</city>
        <city>白银市</city>
        <city>平凉市</city>
        <city>庆阳市</city>
        <city>陇南市</city>
        <city>定西市</city>
        <city>金昌市</city>
        <city>武威市</city>
        <city>张掖市</city>
        <city>酒泉市</city>
        <city>嘉峪关市</city>
        <!-- 临夏回族自治州、甘南藏族自治州(2个自治州) -->
        <city>临夏回族自治州</city>
        <city>甘南藏族自治州</city>
    </province>
    <province name="广东省 ">
        <!-- 广州市、深圳 市、佛山市、东莞市、中山市、惠州市、茂名市、江门市、湛江市、珠海市 -->
        <!-- 汕头市、肇庆市、揭阳市、清远市、韶关市 、梅州市、阳江市、潮州 市、河源市、汕尾市 -->
        <!-- 云浮市(21个市) -->
        <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="贵州省">
        <!-- 贵阳市、六盘水市、遵义市、铜仁市、毕节市、安顺市(6个市) -->
        <city>贵阳市</city>
        <city>六盘水市</city>
        <city>遵义市</city>
        <city>铜仁市</city>
        <city>毕节市</city>
        <city>安顺市</city>
        <!-- 黔西南布依族苗族自治州、黔东南苗族侗族自治州、黔南布依族苗族自治州(3个自治州) -->
        <city>黔西南布依族苗族自治州</city>
        <city>黔东南苗族侗族自治州</city>
        <city>黔南布依族苗族自治州</city>
    </province>
    <province name="海南省">
        <!-- 海口市、三亚市、文昌市、琼海市、万宁市、五指山市、东方市、儋州市(8个市) -->
        <city>海口市</city>
        <city>三亚市</city>
        <city>文昌市</city>
        <city>琼海市</city>
        <city>万宁市</city>
        <city>五指山市</city>
        <city>东方市</city>
        <city>儋州市</city>
    </province>
    <province name="河北省">
        <!--石家庄市、唐山市、邯郸市、秦皇岛市、保定市、张家口市、承德市、廊坊市、沧州市、衡水市 -->
        <!-- 邢台市(11个市) -->
        <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="河南省">
        <!-- 郑州市、新乡市、洛阳市、 安阳市、焦作市、许昌市、平顶山市、漯河市、 开封市、濮阳市 -->
        <!-- 鹤壁市、南阳市、三门市、 驻马店市、商丘市、信阳市、周口市(17个市) -->
        <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="黑龙江省">
        <!-- 哈尔滨市、齐齐哈尔、鹤岗、双鸭山市、鸡西、大庆、伊春、牡丹江市、佳木斯市、七台河市、 -->
        <!-- 黑河市、绥化市(12市) -->
        <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="湖北省">
        <!-- 武汉市、黄石市、十堰市、荆州市、宜昌市、襄樊市、鄂州市、荆门市、孝感市、黄冈市、咸宁市、随州市(12个直辖市) -->
        <city>武汉市</city>
        <city>黄石市</city>
        <city>十堰市</city>
        <city>荆州市</city>
        <city>宜昌市</city>
        <city>襄樊市</city>
        <city>鄂州市</city>
        <city>荆门市</city>
        <city>孝感市</city>
        <city>黄冈市</city>
        <city>咸宁市</city>
        <city>随州市</city>
        <!-- 恩施土家族苗族自治州(1个自治州) -->
        <city>恩施土家族苗族自治州</city>
        <!-- 神农架林区(1个林区) -->
        <city>神农架林区</city>
    </province>
    <province name="湖南省">
        <!--长沙市、株洲市、湘潭市、岳阳市、益阳市、常德市、衡阳市、邵阳市、张家界市、郴州市 -->
        <!--永州市、怀化市、娄底市 (13个市) -->
        <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>
        <!-- 湘西土家族苗族自治州(1个自治州) -->
        <city>湘西土家族苗族自治州</city>
    </province>
    <province name="吉林省">
        <!-- 长春市、吉林市、四平市、辽源市 、通化市、白山市、松原市、白城市(8个市) -->
        <city>长春市</city>
        <city>吉林市</city>
        <city>四平市</city>
        <city>辽源市</city>
        <city>通化市</city>
        <city>白山市</city>
        <city>松原市</city>
        <city>白城市</city>
        <!-- 延边朝鲜族自治州 (1个自治州) -->
        <city>延边朝鲜族自治州</city>
    </province>
    <province name="江苏省">
        <!--南京市、 扬州市、苏州市、无锡市、 南通市、 常州市、 徐州市、 连云港市、 镇江市、 淮安市 -->
        <!--宿迁市、 盐城市、 泰州市(13个市) -->
        <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="江西省">
        <!-- 南昌市、景德镇、九江市、 萍乡市、新余市、鹰潭市、赣州市、宜春市、上饶市、吉安市 -->
        <!-- 抚州市(11市) -->
        <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="辽宁省">
        <!-- 沈阳市、大连市、 鞍山市、抚顺市、本溪市、丹东市、锦州市、营口市、阜新市、辽阳市 -->
        <!-- 盘锦市、铁岭市、朝阳市、葫芦岛市(14个市) -->
        <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="青海省">
        <!-- 西宁市、格尔木(县)、海东(市)(3市) -->
        <city>西宁市</city>
        <city>格尔木</city>
        <city>海东</city>
    </province>
    <province name="山东省">
        <!-- 济南市、德州市、聊城市、菏泽市、泰安市、莱芜市、济宁市、枣庄市、临沂市、 日照市、 -->
        <!-- 青岛市、威海市、烟台市、潍坊市、淄博市、东营市、滨州市(17市) -->
        <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>
    </province>
    <province name="四川省">
        <!-- 成都市、绵阳市、自贡市、攀枝花市、泸州市、德阳市、广元市、遂宁市、内江市、乐山市 -->
        <!-- 资阳市、宜宾市、南充市、达州市、雅安市、广安市、巴中市、眉山市(18个市) -->
        <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>
        <!-- 阿坝藏族羌族自治州、甘孜藏族自治州、凉山彝族自治州(3个自治州) -->
        <city>阿坝藏族羌族自治州</city>
        <city>甘孜藏族自治州</city>
        <city>凉山彝族自治州</city>
    </province>
    <province name="台湾省">
        <!-- 台北市、新北市、台中市、台南市、高雄市(5个市)及桃园市(1个准直辖市) -->
        <city>台北市</city>
        <city>新北市</city>
        <city>台中市</city>
        <city>台南市</city>
        <city>高雄市</city>
        <city>桃园市</city>
    </province>
    <province name="云南省">
        <!-- 昆明市、曲靖市、玉溪市、保山市、昭通市、丽江市、思茅市、临沧市(8个市) -->
        <city>昆明市</city>
        <city>曲靖市</city>
        <city>玉溪市</city>
        <city>保山市</city>
        <city>昭通市</city>
        <city>丽江市</city>
        <city>思茅市</city>
        <city>临沧市</city>
        <!-- 文山州、红河州、西双版纳州、楚雄州、大理州、德宏州、怒江州、迪庆州(8个自治州) -->
        <city>文山州</city>
        <city>红河州</city>
        <city>西双版纳州</city>
        <city>楚雄州</city>
        <city>大理州</city>
        <city>德宏州</city>
        <city>怒江州</city>
        <city>迪庆州</city>
    </province>
    <province name="浙江省">
        <!--杭州市、 衢州市、湖州市、嘉兴市、宁波市、绍兴市、台州市、温州市、丽水市、金花市 -->
        <!--舟山市、兰溪市(12个市) -->
        <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="广西壮族">
        <!--桂林市、南宁市、柳州市、梧州市、玉林市、钦州市、来宾市、贵港市、北海市、防城港市 -->
        <!--崇左市、百色市、河池市、贺州市 (14个市) -->
        <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="内蒙古蒙古族">
        <!-- 呼伦贝尔市、呼和浩特市、通辽市、赤峰市、乌兰察布市、包头市、鄂尔多斯市、巴彦淖尔市 、乌海市(9个市) -->
        <city>呼伦贝尔市</city>
        <city>呼和浩特市</city>
        <city>通辽市</city>
        <city>赤峰市</city>
        <city>乌兰察布市</city>
        <city>包头市</city>
        <city>鄂尔多斯市</city>
        <city>巴彦淖尔市</city>
        <city>乌海市</city>
        <!-- 阿拉善盟、兴安盟、锡林郭勒盟(3个盟区) -->
        <city>阿拉善盟</city>
        <city>兴安盟</city>
        <city>锡林郭勒盟</city>
    </province>
    <province name="宁夏回族">
        <!-- 银川市、石嘴山市、吴忠市、固原市、中卫市(5个市) -->
        <city>银川市</city>
        <city>石嘴山市</city>
        <city>吴忠市</city>
        <city>固原市</city>
        <city>中卫市</city>
    </province>
    <province name="西藏藏族">
        <!-- 拉萨市(1个市) -->
        <city>拉萨市</city>
    </province>
    <province name="新疆维吾尔族">
        <!-- 乌鲁木齐市 、克拉玛依市、石河子市、五家渠市、阿拉尔市、图木舒克市(6个地级市) -->
        <city>乌鲁木齐市 </city>
        <city>克拉玛依市</city>
        <city>石河子市</city>
        <city>五家渠市</city>
        <city>阿拉尔市</city>
        <city>图木舒克市</city>
    </province>
    <!-- 2个特别行政区 -->
    <province name="香港特别行政区">
        <!-- 中西区、东区、南区、湾仔区 (香港岛4个区) -->
        <city>中西区</city>
        <city>东区</city>
        <city>南区</city>
        <city>湾仔区</city>
        <!-- 九龙城区、观塘区、观塘区、黄大仙区、油尖旺区 (九龙岛5个区) -->
        <city>九龙城区</city>
        <city>观塘区</city>
        <city>观塘区</city>
        <city>黄大仙区</city>
        <city>油尖旺区</city>
        <!-- 离岛区、葵青区、北区、西贡区、沙田区、大埔区、荃湾区、屯门区、元朗区(新界9个区) -->
        <city>离岛区</city>
        <city>葵青区</city>
        <city>北区</city>
        <city>西贡区</city>
        <city>沙田区</city>
        <city>大埔区</city>
        <city>荃湾区</city>
        <city>屯门区</city>
        <city>元朗区</city>
    </province>
    <province name="澳门特别行政区">
        <!-- 澳门半岛,氹仔岛,路环岛,路氹城(4个岛区) -->
        <city>澳门半岛</city>
        <city>氹仔岛</city>
        <city>路环岛</city>
        <city>路氹城</city>
    </province>
</china>

 

接着就是一个location.html文档了

//用 js 和 xml 结合的Ajax 和html结合实现二级联动

内容如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>中国省份与城市的二联动</title>
</head>
<body>
<select id="province" name="province">
    <option value="">请选择...</option>
    <optgroup label="直辖市"></optgroup>
    <!--北京市    天津市    上海市    重庆市 -->
    <option value="北京市">北京市</option>
    <option value="上海市">上海市</option>
    <option value="天津市">天津市</option>
    <option value="重庆市">重庆市</option>
    <optgroup label="省份"></optgroup>
    <!--
    安徽省    福建省     甘肃省   广东省    贵州省    海南省
    河北省    河南省   黑龙江省 湖北省   湖南省    吉林省
    江苏省    江西省    辽宁省      青海省    山东省  山西省
     陕西省    四川省     台湾省    云南省    浙江省
     -->
    <option value="安徽省">安徽省</option>
    <option value="福建省">福建省</option>
    <option value="甘肃省">甘肃省</option>
    <option value="广东省">广东省</option>
    <option value="贵州省">贵州省</option>
    <option value="海南省">海南省</option>
    <option value="河北省">河北省</option>
    <option value="河南省">河南省</option>
    <option value="黑龙江省">黑龙江省</option>
    <option value="湖北省">湖北省</option>
    <option value="湖南省">湖南省</option>
    <option value="吉林省">吉林省</option>
    <option value="江苏省 ">江苏省</option>
    <option value="江西省">江西省</option>
    <option value="辽宁省">辽宁省</option>
    <option value="青海省">青海省</option>
    <option value="山东省">山东省</option>
    <option value="山西省">山西省</option>
    <option value="陕西省">陕西省</option>
    <option value="四川省">四川省</option>
    <option value="台湾省">台湾省</option>
    <option value="云南省">云南省</option>
    <option value="浙江省">浙江省</option>
    <optgroup label="民族自治区"></optgroup>
    <!-- 广西壮族、内蒙古蒙古族、 宁夏回族、 西藏藏族、 新疆维吾尔族 -->
    <option value="广西壮族">广西壮族</option>
    <option value="内蒙古蒙古族">内蒙古蒙古族</option>
    <option value="宁夏回族">宁夏回族</option>
    <option value="西藏藏族">西藏藏族</option>
    <option value="新疆维吾尔族">新疆维吾尔族</option>
    <optgroup label="特别行政区"></optgroup>
    <!-- 香港特别行政区    澳门特别行政区 -->
    <option value="香港特别行政区">香港特别行政区</option>
    <option value="澳门特别行政区">澳门特别行政区</option>
</select>
<select id="city" name="city">
    <option value="">请选择...</option>
</select>
</body>
<script type="text/javascript" language="JavaScript">
    window.onload = function() {
        document.getElementById("province").onchange = function() {
            //获取变化的省的值
            var changeProvinceValue = this.value;//福建省,吉林省等
            //清空城市的下拉选择
            var cityElement = document.getElementById("city");
            /*
            <select id="city" name="city">
            <option value="">请选择...</option>
            <option value="xx">xx</option>
            </select>
             */
            var cityoptionElements = cityElement.getElementsByTagName("option");
            //从后往前删除不符合的城市
            for ( var i = cityoptionElements.length - 1; i > 0; i--) {
                cityElement.removeChild(cityoptionElements[i]);
            }
            //测试xml是否加载成功
            var xmlDoc = parseXML("cities.xml");
            //<province name="吉林省">
            //定位到具体省份
            var xmlProvinceElements = xmlDoc.getElementsByTagName("province");
            var provinceElement = null;
            for ( var i = 0; i < xmlProvinceElements.length; i++) {
                var xmlProvinceElement = xmlProvinceElements[i];
                var nameAttrValue = xmlProvinceElement.getAttribute("name");
                if (nameAttrValue == changeProvinceValue) {
                    //把符合条件的省份的元素保存到外部
                    provinceElement = xmlProvinceElement;
                    break;
                }
            }
            /**
            <province name="山东省">
                <city>济南</city>
                <city>青岛</city>
            </province>
             */
            if (provinceElement != null) {
                //获取省份下面的所有的city节点
                var xmlCityElements = provinceElement
                        .getElementsByTagName("city");
                for ( var i = 0; i < xmlCityElements.length; i++) {
                    //    alert(xmlCityElements[i].firstChild.nodeValue);
                    var cityValue = xmlCityElements[i].firstChild.nodeValue;
                    //创建option标签<option></option>
                    var optionElement = document.createElement("option");
                    //<option value="长春"></option>
                    optionElement.setAttribute("value", cityValue);
                    //长春
                    var cityTextElement = document.createTextNode(cityValue);
                    /***
                    增加
                    <select id="city" name="city">
                        <option value="">请选择....</option>
                    </select>
                     ****/
                    optionElement.appendChild(cityTextElement);
                    cityElement.appendChild(optionElement);
                }
            }
        }
    }
    /*
    加载xml文件
     */
    function parseXML(filename) {
        try {//IE
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            //      new ActiveXObject("Microsoft.XMLDOM");
            //alert("IE Browser");
        } catch (e) {
            try {//Firefox,Mosilla.Opera etc
                xmlDoc = document.implementation.createDocument("", "", null);
                //    alert("other");
            } catch (e) {
                alert("your borwser is‘not use");
            }
        }
        //关闭异步加载
        xmlDoc.async = false;
        //加载xml文件
        xmlDoc.load(filename);
        return xmlDoc;
    }
</script>
</html>

//结果如下图所示:

技术分享
 
运行要求就是:
xml文档的名称是  cities.xml
html文档的名称是:XXXX.html(XXXX表示合法的文件名称字符)
这两个文件的所放的位置都是在同一文件夹下的。
 
结果:就会出现你所想要的结果了

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。