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>

cities.xml

接着就是一个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>

location.html

//结果如下图所示:

xml+js+html的二级联动
 
运行要求就是:
xml文档的名称是  cities.xml
html文档的名称是:XXXX.html(XXXX表示合法的文件名称字符)
这两个文件的所放的位置都是在同一文件夹下的。
 
结果:就会出现你所想要的结果了
上一篇:用原生JS写省市二级联动


下一篇:js实现城市二级联动列表