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文档的名称是 cities.xml

html文档的名称是：XXXX.html（XXXX表示合法的文件名称字符）

这两个文件的所放的位置都是在同一文件夹下的。

结果：就会出现你所想要的结果了

xml+js+html的二级联动的更多相关文章

Mybatis + js 实现下拉列表二级联动
Mybatis + js 实现下拉列表二级联动学习内容: 一.业务需求二.实现效果三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...
js实现城市二级联动列表
这个是一个同事写的,我看着有用,就cv下来了. 程序功能主要逻辑是: 1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏 2.一级标签选中城市时,二级标签显示在页面,并列出响应市区 3.当 ...
js实现菜单二级联动
代码如下,以便自己以后方便查阅: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> < ...
原生JS的地区二级联动，很好理解的逻辑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
用原生JS写省市二级联动
HTML代码 <select id="s1"> <option value="0">~请选择省份~</option> < ...
JS简单实现二级联动菜单
<form method="post" action=""> 省/市:<select id="province" onch ...
用JS实现省市二级联动
一.需求分析我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 二.技术分析使用事件(onchange) 使用一个二 ...
JavaScript学习——使用JS完成省市二级联动
1.我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 2.步骤分析: 第一步:确定事件(onchange)并为其绑定一 ...
asp.net 使用DroDownList来实现二级联动
今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...

随机推荐

移动web前端之meta标签
最近这段时间忙着做web移动端,东西跟pc端还是有区别的.这个月也学到了不少东西,太多了就从头开始,先总结meta标签吧. 主要标签内容和注释如下: <meta charset="UT ...
a标签样式
.a{ cursor:pointer; color: blue; text-decoration:none; }
python学习之if语句
1.if条件表达式判断 ##判断条件是true or false var1=10 if var1: print("true") print(var1) else: print(&q ...
QA、Selenium WebDriver （Q&A）
Q:启动IE浏览器时突然报下面错误,不能正常使用. WebDriverException: Message: Unexpected error launching Internet Explo ...
Hadoop集群环境搭建
----------------------------------------------------------- 自学记录,交流学习请发送邮件至gxz1984@gmail.com ------- ...
windows下MySQL 5.7+ 解压缩版安装配置方法
方法来自伟大的互联网. 1.去官网下载.zip格式的MySQL Server的压缩包,根据需要选择x86或x64版.注意:下载是需要注册账户并登录的. 2.解压缩至你想要的位置. 3.复制解压目录下m ...
左边图标右边文字，在div里居中
解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...
poj2280Amphiphilic Carbon Molecules(极角排序)
链接卡了几天的破题,对于hdu的那份数据,这就一神题.. 借助极角排序,枚举以每一个点进行极角排序,然后构造两条扫描线,一个上面一个下面,两条同时走,把上线和下线的点以及上线左边的点分别统计出来,如 ...
使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

xml+js+html的二级联动

xml+js+html的二级联动的更多相关文章

随机推荐

热门专题