首先需要准备的文档是：
cities.xml
//主要是标注中国各省及其各省下的各个城市
内容如下：
1 <?xml version="1.0" encoding="UTF-8"?> 2 <china> 3 <!-- 四大直辖市 --> 4 <!-- 北京市、上海市、天津市、重庆市 --> 5 <province name="北京市"> 6 <!--东城区、西城区、崇文区、宣武区、朝阳区、丰台区、石景山区、海淀区、门头沟区、房山区--> 7 <!--通州区、顺义区、昌平区、大兴区、怀柔区、平谷区(16个区) --> 8 <city>东城区</city> 9 <city>西城区</city> 10 <city>崇文区</city> 11 <city>宣武区</city> 12 <city>朝阳区</city> 13 <city>丰台区</city> 14 <city>石景山区</city> 15 <city>海淀区</city> 16 <city>门头沟区</city> 17 <city>房山区</city> 18 <city>通州区</city> 19 <city>顺义区</city> 20 <city>昌平区</city> 21 <city>大兴区</city> 22 <city>怀柔区</city> 23 <city>平谷区</city> 24 <!--密云县、延庆县(2个县) --> 25 <city>密云县</city> 26 <city>延庆县</city> 27 </province> 28 <province name="上海市"> 29 <!-- 黄浦区、卢湾区、徐汇区、长宁区、静安区、普陀区、闸北区、虹口区、杨浦区、闵行区--> 30 <!-- 宝山区、嘉定区、浦东新区、金山区、松江区、青浦区、南汇区、奉贤区 (18个区)--> 31 <city>黄浦区</city> 32 <city>卢湾区</city> 33 <city>徐汇区</city> 34 <city>长宁区</city> 35 <city>静安区</city> 36 <city>普陀区</city> 37 <city>闸北区</city> 38 <city>虹口区</city> 39 <city>杨浦区</city> 40 <city>闵行区</city> 41 <city>宝山区</city> 42 <city>嘉定区</city> 43 <city>浦东新区</city> 44 <city>金山区</city> 45 <city>松江区</city> 46 <city>青浦区</city> 47 <city>南汇区</city> 48 <city>奉贤区</city> 49 <!-- 崇明县(1个县) --> 50 <city>崇明县</city> 51 </province> 52 <province name="天津市"> 53 <!-- 河西区、南开区、和平区、河东区、河北区、红桥区(市内六区) --> 54 <city>河西区</city> 55 <city>南开区</city> 56 <city>和平区</city> 57 <city>河东区</city> 58 <city>河北区</city> 59 <city>红桥区</city> 60 <!-- 北辰区、津南区、东丽区、西青区(新四区) --> 61 <city>北辰区</city> 62 <city>津南区</city> 63 <city>东丽区</city> 64 <city>西青区</city> 65 <!-- 武清区、宝坻区(远郊二区) --> 66 <city>武清区</city> 67 <city>宝坻区</city> 68 <!-- 蓟县、宁河县、静海县(3个县) --> 69 <city>蓟县</city> 70 <city>宁河县</city> 71 <city>静海县</city> 72 <!-- 滨海新区(1个区) --> 73 <city>滨海新区</city> 74 </province> 75 <province name="重庆市"> 76 <!--渝中区、大渡口区、江北区、沙坪坝区、九龙坡区、南岸区、北碚区、万盛区、双桥区、渝北区--> 77 <!--万州区、涪陵区、黔江区、长寿区、江津区、合川区、永川区、南川区、巴南区(19个区) --> 78 <city>渝中区</city> 79 <city>大渡口区</city> 80 <city>江北区</city> 81 <city>沙坪坝区</city> 82 <city>九龙坡区</city> 83 <city>南岸区</city> 84 <city>北碚区</city> 85 <city>万盛区</city> 86 <city>双桥区</city> 87 <city>渝北区</city> 88 <city>万州区</city> 89 <city>涪陵区</city> 90 <city>黔江区</city> 91 <city>长寿区</city> 92 <city>江津区</city> 93 <city>合川区</city> 94 <city>永川区</city> 95 <city>南川区</city> 96 <city>巴南区</city> 97 </province> 98 <!-- 23个省 --> 99 <!-- 安徽省、福建省、甘肃省、广东省、贵州省、海南省、河北省、河南省、黑龙江省、湖北省 --> 100 <!-- 湖南省、吉林省、江苏省、江西省、辽宁省、青海省、山东省、山西省、陕西省、四川省 --> 101 <!-- 台湾省 云南省 浙江省 --> 102 <province name="安徽省"> 103 <!-- 合肥市、蚌埠市、芜湖市、淮南市、马鞍山市、淮北市、铜陵市、安庆市、黄山市、阜阳市 --> 104 <!-- 宿州市、滁州市、六安市、宣城市、巢湖市、池州市、亳州市(17个市) --> 105 <city>合肥市</city> 106 <city>蚌埠市</city> 107 <city>芜湖市</city> 108 <city>淮南市</city> 109 <city>马鞍山市</city> 110 <city>淮北市</city> 111 <city>铜陵市</city> 112 <city>安庆市</city> 113 <city>黄山市</city> 114 <city>阜阳市</city> 115 <city>宿州市</city> 116 <city>滁州市</city> 117 <city>六安市</city> 118 <city>宣城市</city> 119 <city>巢湖市</city> 120 <city>池州市</city> 121 <city>亳州市</city> 122 <!-- 界首市、桐城市 、天长市 、明光市、宁国市(5个直辖县级市) --> 123 <city>界首市</city> 124 <city>桐城市</city> 125 <city>天长市</city> 126 <city>明光市</city> 127 <city>宁国市</city> 128 </province> 129 <province name="福建省"> 130 <!-- 福州市、厦门市、宁德市、莆田市、泉州市、漳州市、龙岩市、三明市、南平市(9市) --> 131 <city>福州市</city> 132 <city>厦门市</city> 133 <city>宁德市</city> 134 <city>莆田市</city> 135 <city>泉州市</city> 136 <city>龙岩市</city> 137 <city>漳州市</city> 138 <city>三明市</city> 139 <city>南平市</city> 140 </province> 141 <province name="甘肃省"> 142 <!-- 兰州市、天水市、白银市、平凉市、庆阳市、陇南市、定西市、金昌市、武威市、张掖市、酒泉市、嘉峪关市(12个市) --> 143 <city>兰州市</city> 144 <city>天水市</city> 145 <city>白银市</city> 146 <city>平凉市</city> 147 <city>庆阳市</city> 148 <city>陇南市</city> 149 <city>定西市</city> 150 <city>金昌市</city> 151 <city>武威市</city> 152 <city>张掖市</city> 153 <city>酒泉市</city> 154 <city>嘉峪关市</city> 155 <!-- 临夏回族自治州、甘南藏族自治州(2个自治州) --> 156 <city>临夏回族自治州</city> 157 <city>甘南藏族自治州</city> 158 </province> 159 <province name="广东省 "> 160 <!-- 广州市、深圳 市、佛山市、东莞市、中山市、惠州市、茂名市、江门市、湛江市、珠海市 --> 161 <!-- 汕头市、肇庆市、揭阳市、清远市、韶关市 、梅州市、阳江市、潮州 市、河源市、汕尾市 --> 162 <!-- 云浮市(21个市) --> 163 <city>广州市</city> 164 <city>深圳 市</city> 165 <city>佛山市</city> 166 <city>东莞市</city> 167 <city>中山市</city> 168 <city>惠州市</city> 169 <city>茂名市</city> 170 <city>江门市</city> 171 <city>湛江市</city> 172 <city>珠海市</city> 173 <city>汕头市</city> 174 <city>肇庆市</city> 175 <city>揭阳市</city> 176 <city>清远市</city> 177 <city>韶关市</city> 178 <city>梅州市</city> 179 <city>阳江市</city> 180 <city>潮州 市</city> 181 <city>河源市</city> 182 <city>汕尾市</city> 183 <city>云浮市</city> 184 </province> 185 <province name="贵州省"> 186 <!-- 贵阳市、六盘水市、遵义市、铜仁市、毕节市、安顺市(6个市) --> 187 <city>贵阳市</city> 188 <city>六盘水市</city> 189 <city>遵义市</city> 190 <city>铜仁市</city> 191 <city>毕节市</city> 192 <city>安顺市</city> 193 <!-- 黔西南布依族苗族自治州、黔东南苗族侗族自治州、黔南布依族苗族自治州(3个自治州) --> 194 <city>黔西南布依族苗族自治州</city> 195 <city>黔东南苗族侗族自治州</city> 196 <city>黔南布依族苗族自治州</city> 197 </province> 198 <province name="海南省"> 199 <!-- 海口市、三亚市、文昌市、琼海市、万宁市、五指山市、东方市、儋州市(8个市) --> 200 <city>海口市</city> 201 <city>三亚市</city> 202 <city>文昌市</city> 203 <city>琼海市</city> 204 <city>万宁市</city> 205 <city>五指山市</city> 206 <city>东方市</city> 207 <city>儋州市</city> 208 </province> 209 <province name="河北省"> 210 <!--石家庄市、唐山市、邯郸市、秦皇岛市、保定市、张家口市、承德市、廊坊市、沧州市、衡水市 --> 211 <!-- 邢台市(11个市) --> 212 <city>石家庄市</city> 213 <city>唐山市</city> 214 <city>邯郸市</city> 215 <city>秦皇岛市</city> 216 <city>保定市</city> 217 <city>张家口市</city> 218 <city>承德市</city> 219 <city>廊坊市</city> 220 <city>沧州市</city> 221 <city>衡水市</city> 222 <city>邢台市</city> 223 </province> 224 <province name="河南省"> 225 <!-- 郑州市、新乡市、洛阳市、 安阳市、焦作市、许昌市、平顶山市、漯河市、 开封市、濮阳市 --> 226 <!-- 鹤壁市、南阳市、三门市、 驻马店市、商丘市、信阳市、周口市(17个市) --> 227 <city>郑州市</city> 228 <city>新乡市</city> 229 <city>洛阳市</city> 230 <city>安阳市</city> 231 <city>焦作市</city> 232 <city>许昌市</city> 233 <city>平顶山市</city> 234 <city>漯河市</city> 235 <city>开封市</city> 236 <city>濮阳市</city> 237 <city>鹤壁市</city> 238 <city>南阳市</city> 239 <city>三门市</city> 240 <city>驻马店市</city> 241 <city>商丘市</city> 242 <city>信阳市</city> 243 <city>周口市</city> 244 </province> 245 <province name="黑龙江省"> 246 <!-- 哈尔滨市、齐齐哈尔、鹤岗、双鸭山市、鸡西、大庆、伊春、牡丹江市、佳木斯市、七台河市、 --> 247 <!-- 黑河市、绥化市(12市) --> 248 <city>哈尔滨市</city> 249 <city>齐齐哈尔市</city> 250 <city>鹤岗市</city> 251 <city>双鸭山市</city> 252 <city>鸡西市</city> 253 <city>大庆市</city> 254 <city>伊春市</city> 255 <city>牡丹江市</city> 256 <city>佳木斯市</city> 257 <city>七台河市</city> 258 <city>黑河市</city> 259 <city>绥化市</city> 260 </province> 261 <province name="湖北省"> 262 <!-- 武汉市、黄石市、十堰市、荆州市、宜昌市、襄樊市、鄂州市、荆门市、孝感市、黄冈市、咸宁市、随州市(12个直辖市) --> 263 <city>武汉市</city> 264 <city>黄石市</city> 265 <city>十堰市</city> 266 <city>荆州市</city> 267 <city>宜昌市</city> 268 <city>襄樊市</city> 269 <city>鄂州市</city> 270 <city>荆门市</city> 271 <city>孝感市</city> 272 <city>黄冈市</city> 273 <city>咸宁市</city> 274 <city>随州市</city> 275 <!-- 恩施土家族苗族自治州(1个自治州) --> 276 <city>恩施土家族苗族自治州</city> 277 <!-- 神农架林区(1个林区) --> 278 <city>神农架林区</city> 279 </province> 280 <province name="湖南省"> 281 <!--长沙市、株洲市、湘潭市、岳阳市、益阳市、常德市、衡阳市、邵阳市、张家界市、郴州市 --> 282 <!--永州市、怀化市、娄底市 (13个市) --> 283 <city>长沙市</city> 284 <city>株洲市</city> 285 <city>湘潭市</city> 286 <city>岳阳市</city> 287 <city>益阳市</city> 288 <city>常德市</city> 289 <city>衡阳市</city> 290 <city>邵阳市</city> 291 <city>张家界市</city> 292 <city>郴州市</city> 293 <city>永州市</city> 294 <city>怀化市</city> 295 <city>娄底市</city> 296 <!-- 湘西土家族苗族自治州(1个自治州) --> 297 <city>湘西土家族苗族自治州</city> 298 </province> 299 <province name="吉林省"> 300 <!-- 长春市、吉林市、四平市、辽源市 、通化市、白山市、松原市、白城市(8个市) --> 301 <city>长春市</city> 302 <city>吉林市</city> 303 <city>四平市</city> 304 <city>辽源市</city> 305 <city>通化市</city> 306 <city>白山市</city> 307 <city>松原市</city> 308 <city>白城市</city> 309 <!-- 延边朝鲜族自治州 (1个自治州) --> 310 <city>延边朝鲜族自治州</city> 311 </province> 312 <province name="江苏省"> 313 <!--南京市、 扬州市、苏州市、无锡市、 南通市、 常州市、 徐州市、 连云港市、 镇江市、 淮安市 --> 314 <!--宿迁市、 盐城市、 泰州市(13个市) --> 315 <city>南京市</city> 316 <city>扬州市</city> 317 <city>苏州市</city> 318 <city>无锡市</city> 319 <city>南通市</city> 320 <city>常州市</city> 321 <city>徐州市</city> 322 <city>连云港市</city> 323 <city>镇江市</city> 324 <city>淮安市</city> 325 <city>宿迁市</city> 326 <city>盐城市</city> 327 <city>泰州市</city> 328 </province> 329 <province name="江西省"> 330 <!-- 南昌市、景德镇、九江市、 萍乡市、新余市、鹰潭市、赣州市、宜春市、上饶市、吉安市 --> 331 <!-- 抚州市(11市) --> 332 <city>南昌市</city> 333 <city>景德镇市</city> 334 <city>九江市</city> 335 <city>萍乡市</city> 336 <city>新余市</city> 337 <city>鹰潭市</city> 338 <city>赣州市</city> 339 <city>宜春市</city> 340 <city>上饶市</city> 341 <city>吉安市</city> 342 <city>抚州市</city> 343 </province> 344 <province name="辽宁省"> 345 <!-- 沈阳市、大连市、 鞍山市、抚顺市、本溪市、丹东市、锦州市、营口市、阜新市、辽阳市 --> 346 <!-- 盘锦市、铁岭市、朝阳市、葫芦岛市(14个市) --> 347 <city>沈阳市</city> 348 <city>大连市</city> 349 <city>鞍山市</city> 350 <city>抚顺市</city> 351 <city>本溪市</city> 352 <city>丹东市</city> 353 <city>锦州市</city> 354 <city>营口市</city> 355 <city>阜新市</city> 356 <city>辽阳市</city> 357 <city>盘锦市</city> 358 <city>铁岭市</city> 359 <city>朝阳市</city> 360 <city>葫芦岛市</city> 361 </province> 362 <province name="青海省"> 363 <!-- 西宁市、格尔木(县)、海东(市)(3市) --> 364 <city>西宁市</city> 365 <city>格尔木</city> 366 <city>海东</city> 367 </province> 368 <province name="山东省"> 369 <!-- 济南市、德州市、聊城市、菏泽市、泰安市、莱芜市、济宁市、枣庄市、临沂市、 日照市、 --> 370 <!-- 青岛市、威海市、烟台市、潍坊市、淄博市、东营市、滨州市(17市) --> 371 <city>济南市</city> 372 <city>德州市</city> 373 <city>聊城市</city> 374 <city>菏泽市</city> 375 <city>泰安市</city> 376 <city>莱芜市</city> 377 <city>济宁市</city> 378 <city>枣庄市</city> 379 <city>临沂市</city> 380 <city>日照市</city> 381 <city>青岛市</city> 382 <city>威海市</city> 383 <city>烟台市</city> 384 <city>潍坊市</city> 385 <city>淄博市</city> 386 <city>东营市</city> 387 <city>滨州市</city> 388 </province> 389 <province name="山西省"> 390 <!-- 太原市、大同市、朔州市、阳泉市、忻州市、吕梁市、晋中市、临汾市、长治市、运城市 --> 391 <!-- 晋城市 --> 392 <city>太原市</city> 393 <city>大同市</city> 394 <city>朔州市</city> 395 <city>阳泉市</city> 396 <city>忻州市</city> 397 <city>吕梁市</city> 398 <city>晋中市</city> 399 <city>临汾市</city> 400 <city>长治市</city> 401 <city>运城市</city> 402 <city>晋城市</city> 403 </province> 404 <province name="陕西省"> 405 <!-- 西安市、铜川市、宝鸡市、咸阳市、渭南市、延安市、汉中市、榆林市、安康市、商洛市 --> 406 <city>西安市</city> 407 <city>铜川市</city> 408 <city>宝鸡市</city> 409 <city>咸阳市</city> 410 <city>渭南市</city> 411 <city>延安市</city> 412 <city>汉中市</city> 413 <city>榆林市</city> 414 <city>安康市</city> 415 <city>商洛市</city> 416 </province> 417 <province name="四川省"> 418 <!-- 成都市、绵阳市、自贡市、攀枝花市、泸州市、德阳市、广元市、遂宁市、内江市、乐山市 --> 419 <!-- 资阳市、宜宾市、南充市、达州市、雅安市、广安市、巴中市、眉山市(18个市) --> 420 <city>成都市</city> 421 <city>绵阳市</city> 422 <city>自贡市</city> 423 <city>攀枝花市</city> 424 <city>泸州市</city> 425 <city>德阳市</city> 426 <city>广元市</city> 427 <city>遂宁市</city> 428 <city>内江市</city> 429 <city>乐山市</city> 430 <city>资阳市</city> 431 <city>宜宾市</city> 432 <city>南充市</city> 433 <city>达州市</city> 434 <city>雅安市</city> 435 <city>广安市</city> 436 <city>巴中市</city> 437 <city>眉山市</city> 438 <!-- 阿坝藏族羌族自治州、甘孜藏族自治州、凉山彝族自治州(3个自治州) --> 439 <city>阿坝藏族羌族自治州</city> 440 <city>甘孜藏族自治州</city> 441 <city>凉山彝族自治州</city> 442 </province> 443 <province name="台湾省"> 444 <!-- 台北市、新北市、台中市、台南市、高雄市(5个市)及桃园市(1个准直辖市) --> 445 <city>台北市</city> 446 <city>新北市</city> 447 <city>台中市</city> 448 <city>台南市</city> 449 <city>高雄市</city> 450 <city>桃园市</city> 451 </province> 452 <province name="云南省"> 453 <!-- 昆明市、曲靖市、玉溪市、保山市、昭通市、丽江市、思茅市、临沧市(8个市) --> 454 <city>昆明市</city> 455 <city>曲靖市</city> 456 <city>玉溪市</city> 457 <city>保山市</city> 458 <city>昭通市</city> 459 <city>丽江市</city> 460 <city>思茅市</city> 461 <city>临沧市</city> 462 <!-- 文山州、红河州、西双版纳州、楚雄州、大理州、德宏州、怒江州、迪庆州(8个自治州) --> 463 <city>文山州</city> 464 <city>红河州</city> 465 <city>西双版纳州</city> 466 <city>楚雄州</city> 467 <city>大理州</city> 468 <city>德宏州</city> 469 <city>怒江州</city> 470 <city>迪庆州</city> 471 </province> 472 <province name="浙江省"> 473 <!--杭州市、 衢州市、湖州市、嘉兴市、宁波市、绍兴市、台州市、温州市、丽水市、金花市 --> 474 <!--舟山市、兰溪市(12个市) --> 475 <city>杭州市</city> 476 <city>衢州市</city> 477 <city>湖州市</city> 478 <city>嘉兴市</city> 479 <city>宁波市</city> 480 <city>绍兴市</city> 481 <city>台州市</city> 482 <city>温州市</city> 483 <city>丽水市</city> 484 <city>金花市</city> 485 <city>舟山市</city> 486 <city>兰溪市</city> 487 </province> 488 <!-- 五大民族自治区 --> 489 <!-- 广西壮族、内蒙古蒙古族、 宁夏回族、 西藏藏族、 新疆维吾尔族 --> 490 <province name="广西壮族"> 491 <!--桂林市、南宁市、柳州市、梧州市、玉林市、钦州市、来宾市、贵港市、北海市、防城港市 --> 492 <!--崇左市、百色市、河池市、贺州市 (14个市) --> 493 <city>桂林市</city> 494 <city>南宁市</city> 495 <city>柳州市</city> 496 <city>梧州市</city> 497 <city>玉林市</city> 498 <city>钦州市</city> 499 <city>来宾市</city> 500 <city>贵港市</city> 501 <city>北海市</city> 502 <city>防城港市</city> 503 <city>崇左市</city> 504 <city>百色市</city> 505 <city>河池市</city> 506 <city>贺州市</city> 507 </province> 508 <province name="内蒙古蒙古族"> 509 <!-- 呼伦贝尔市、呼和浩特市、通辽市、赤峰市、乌兰察布市、包头市、鄂尔多斯市、巴彦淖尔市 、乌海市(9个市) --> 510 <city>呼伦贝尔市</city> 511 <city>呼和浩特市</city> 512 <city>通辽市</city> 513 <city>赤峰市</city> 514 <city>乌兰察布市</city> 515 <city>包头市</city> 516 <city>鄂尔多斯市</city> 517 <city>巴彦淖尔市</city> 518 <city>乌海市</city> 519 <!-- 阿拉善盟、兴安盟、锡林郭勒盟(3个盟区) --> 520 <city>阿拉善盟</city> 521 <city>兴安盟</city> 522 <city>锡林郭勒盟</city> 523 </province> 524 <province name="宁夏回族"> 525 <!-- 银川市、石嘴山市、吴忠市、固原市、中卫市(5个市) --> 526 <city>银川市</city> 527 <city>石嘴山市</city> 528 <city>吴忠市</city> 529 <city>固原市</city> 530 <city>中卫市</city> 531 </province> 532 <province name="西藏藏族"> 533 <!-- 拉萨市(1个市) --> 534 <city>拉萨市</city> 535 </province> 536 <province name="新疆维吾尔族"> 537 <!-- 乌鲁木齐市 、克拉玛依市、石河子市、五家渠市、阿拉尔市、图木舒克市(6个地级市) --> 538 <city>乌鲁木齐市 </city> 539 <city>克拉玛依市</city> 540 <city>石河子市</city> 541 <city>五家渠市</city> 542 <city>阿拉尔市</city> 543 <city>图木舒克市</city> 544 </province> 545 <!-- 2个特别行政区 --> 546 <province name="香港特别行政区"> 547 <!-- 中西区、东区、南区、湾仔区 (香港岛4个区) --> 548 <city>中西区</city> 549 <city>东区</city> 550 <city>南区</city> 551 <city>湾仔区</city> 552 <!-- 九龙城区、观塘区、观塘区、黄大仙区、油尖旺区 (九龙岛5个区) --> 553 <city>九龙城区</city> 554 <city>观塘区</city> 555 <city>观塘区</city> 556 <city>黄大仙区</city> 557 <city>油尖旺区</city> 558 <!-- 离岛区、葵青区、北区、西贡区、沙田区、大埔区、荃湾区、屯门区、元朗区(新界9个区) --> 559 <city>离岛区</city> 560 <city>葵青区</city> 561 <city>北区</city> 562 <city>西贡区</city> 563 <city>沙田区</city> 564 <city>大埔区</city> 565 <city>荃湾区</city> 566 <city>屯门区</city> 567 <city>元朗区</city> 568 </province> 569 <province name="澳门特别行政区"> 570 <!-- 澳门半岛,氹仔岛,路环岛,路氹城(4个岛区) --> 571 <city>澳门半岛</city> 572 <city>氹仔岛</city> 573 <city>路环岛</city> 574 <city>路氹城</city> 575 </province> 576 </china> 577 578
接着就是一个location.html文档了
//用 js 和 xml 结合的Ajax 和html结合实现二级联动
内容如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>中国省份与城市的二联动</title> 6 </head> 7 <body> 8 <select id="province" name="province"> 9 <option value="">请选择...</option> 10 <optgroup label="直辖市"></optgroup> 11 <!--北京市 天津市 上海市 重庆市 --> 12 <option value="北京市">北京市</option> 13 <option value="上海市">上海市</option> 14 <option value="天津市">天津市</option> 15 <option value="重庆市">重庆市</option> 16 <optgroup label="省份"></optgroup> 17 <!-- 18 安徽省 福建省 甘肃省 广东省 贵州省 海南省 19 河北省 河南省 黑龙江省 湖北省 湖南省 吉林省 20 江苏省 江西省 辽宁省 青海省 山东省 山西省 21 陕西省 四川省 台湾省 云南省 浙江省 22 --> 23 <option value="安徽省">安徽省</option> 24 <option value="福建省">福建省</option> 25 <option value="甘肃省">甘肃省</option> 26 <option value="广东省">广东省</option> 27 <option value="贵州省">贵州省</option> 28 <option value="海南省">海南省</option> 29 <option value="河北省">河北省</option> 30 <option value="河南省">河南省</option> 31 <option value="黑龙江省">黑龙江省</option> 32 <option value="湖北省">湖北省</option> 33 <option value="湖南省">湖南省</option> 34 <option value="吉林省">吉林省</option> 35 <option value="江苏省 ">江苏省</option> 36 <option value="江西省">江西省</option> 37 <option value="辽宁省">辽宁省</option> 38 <option value="青海省">青海省</option> 39 <option value="山东省">山东省</option> 40 <option value="山西省">山西省</option> 41 <option value="陕西省">陕西省</option> 42 <option value="四川省">四川省</option> 43 <option value="台湾省">台湾省</option> 44 <option value="云南省">云南省</option> 45 <option value="浙江省">浙江省</option> 46 <optgroup label="民族自治区"></optgroup> 47 <!-- 广西壮族、内蒙古蒙古族、 宁夏回族、 西藏藏族、 新疆维吾尔族 --> 48 <option value="广西壮族">广西壮族</option> 49 <option value="内蒙古蒙古族">内蒙古蒙古族</option> 50 <option value="宁夏回族">宁夏回族</option> 51 <option value="西藏藏族">西藏藏族</option> 52 <option value="新疆维吾尔族">新疆维吾尔族</option> 53 <optgroup label="特别行政区"></optgroup> 54 <!-- 香港特别行政区 澳门特别行政区 --> 55 <option value="香港特别行政区">香港特别行政区</option> 56 <option value="澳门特别行政区">澳门特别行政区</option> 57 </select> 58 <select id="city" name="city"> 59 <option value="">请选择...</option> 60 </select> 61 </body> 62 <script type="text/javascript" language="JavaScript"> 63 window.onload = function() { 64 document.getElementById("province").onchange = function() { 65 //获取变化的省的值 66 var changeProvinceValue = this.value;//福建省，吉林省等 67 //清空城市的下拉选择 68 var cityElement = document.getElementById("city"); 69 /* 70 <select id="city" name="city"> 71 <option value="">请选择...</option> 72 <option value="xx">xx</option> 73 </select> 74 */ 75 var cityoptionElements = cityElement.getElementsByTagName("option"); 76 //从后往前删除不符合的城市 77 for ( var i = cityoptionElements.length - 1; i > 0; i--) { 78 cityElement.removeChild(cityoptionElements[i]); 79 } 80 //测试xml是否加载成功 81 var xmlDoc = parseXML("cities.xml"); 82 //<province name="吉林省"> 83 //定位到具体省份 84 var xmlProvinceElements = xmlDoc.getElementsByTagName("province"); 85 var provinceElement = null; 86 for ( var i = 0; i < xmlProvinceElements.length; i++) { 87 var xmlProvinceElement = xmlProvinceElements[i]; 88 var nameAttrValue = xmlProvinceElement.getAttribute("name"); 89 if (nameAttrValue == changeProvinceValue) { 90 //把符合条件的省份的元素保存到外部 91 provinceElement = xmlProvinceElement; 92 break; 93 } 94 } 95 /** 96 <province name="山东省"> 97 <city>济南</city> 98 <city>青岛</city> 99 </province> 100 */ 101 if (provinceElement != null) { 102 //获取省份下面的所有的city节点 103 var xmlCityElements = provinceElement 104 .getElementsByTagName("city"); 105 for ( var i = 0; i < xmlCityElements.length; i++) { 106 // alert(xmlCityElements[i].firstChild.nodeValue); 107 var cityValue = xmlCityElements[i].firstChild.nodeValue; 108 //创建option标签<option></option> 109 var optionElement = document.createElement("option"); 110 //<option value="长春"></option> 111 optionElement.setAttribute("value", cityValue); 112 //长春 113 var cityTextElement = document.createTextNode(cityValue); 114 /*** 115 增加 116 <select id="city" name="city"> 117 <option value="">请选择....</option> 118 </select> 119 ****/ 120 optionElement.appendChild(cityTextElement); 121 cityElement.appendChild(optionElement); 122 } 123 } 124 } 125 } 126 /* 127 加载xml文件 128 */ 129 function parseXML(filename) { 130 try {//IE 131 xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 132 // new ActiveXObject("Microsoft.XMLDOM"); 133 //alert("IE Browser"); 134 } catch (e) { 135 try {//Firefox,Mosilla.Opera etc 136 xmlDoc = document.implementation.createDocument("", "", null); 137 // alert("other"); 138 } catch (e) { 139 alert("your borwser is'not use"); 140 } 141 } 142 //关闭异步加载 143 xmlDoc.async = false; 144 //加载xml文件 145 xmlDoc.load(filename); 146 return xmlDoc; 147 } 148 </script> 149 </html>
//结果如下图所示：
运行要求就是：
xml文档的名称是 cities.xml
html文档的名称是：XXXX.html（XXXX表示合法的文件名称字符）
这两个文件的所放的位置都是在同一文件夹下的。
结果：就会出现你所想要的结果了
