使用 Jquery+Ajax+xml制作中国地区选择三级联动菜单
本文主要介绍使用 Jquery+Ajax+xml，首先需要一个包含我国所有地图信息的xml文档。
此处选用的xml文档(共1000多行)主要结构如下：
1 <?xml version="1.0" encoding="utf-8"?>
2 <area Country="China">
3 <province ID="1" provinceID="110000" province="北京市">
4 <City CityID="110100" City="市辖区">
5 <Piecearea PieceareaID="110101" Piecearea="东城区" />
6 <Piecearea PieceareaID="110102" Piecearea="西城区" />
7 <Piecearea PieceareaID="110103" Piecearea="崇文区" />
8 <Piecearea PieceareaID="110104" Piecearea="宣武区" />
9 <Piecearea PieceareaID="110105" Piecearea="朝阳区" />
10 <Piecearea PieceareaID="110106" Piecearea="丰台区" />
11 <Piecearea PieceareaID="110107" Piecearea="石景山区" />
12 <Piecearea PieceareaID="110108" Piecearea="海淀区" />
13 <Piecearea PieceareaID="110109" Piecearea="门头沟区" />
14 <Piecearea PieceareaID="110111" Piecearea="房山区" />
15 <Piecearea PieceareaID="110112" Piecearea="通州区" />
16 <Piecearea PieceareaID="110113" Piecearea="顺义区" />
17 <Piecearea PieceareaID="110114" Piecearea="昌平区" />
18 <Piecearea PieceareaID="110115" Piecearea="大兴区" />
19 <Piecearea PieceareaID="110116" Piecearea="怀柔区" />
20 <Piecearea PieceareaID="110117" Piecearea="平谷区" />
21 </City>
22 <province>
制作对应的表单，根据设置选择省/市的动作:
1 <h2>地区三级联动菜单</h2>
2 省:<select id="province" onchange="showcity()"><option value="0">-请选择-</option></select>
3 市:<select id="city" onchange="showdistrict()"><option value="0">-请选择-</option></select>
4 地区:<select id="district"><option value="0">-请选择-</option></select>
以下是JS代码行
1 //声明一个全局变量，用于存储第一次请求的xml信息,避免后续多次频繁请求xml
2 var xmldom =null;
3 //获取并显示省份信息
4 function showprovince(){
5 //使用ajax去服务器获得xml文件里面的省份信息
6 $.ajax({
7 url:'./ChinaArea.xml',
8 //data:
9 dataType:'xml',//相当于调用responseXML
10 type:'get',
11 success:function(msg){
12 //将返回的xml信息赋予xmldom
13 xmldom = msg;
14 //获得province 元素节点对象
15 var prov = $(msg).find('province');
16 //遍历省份信息
17 prov.each(function(k,v){
18 var nm = $(this).attr('province');
19 var id = $(this).attr('provinceID');
20 //追加到指定的节点
21 $('#province').append("<option value="+id+">"+nm+"</option>");
22 });
23 }
24
25 });
26 }
27 //网页加载显示省份信息
28 $(function(){
29 showprovince();
30 });
31 function showcity(){
32 //获取 省份 的id
33 var pid = $('#province option:selected').val();
34 //根据xmldom信息 找到指定的省份节点
35 var xml_province = $(xmldom).find('province[provinceID='+pid+']');
36 // 获取对应所有县市节点
37 var city = $(xml_province).find('City');
38 //在遍历追加前，先清空此前已经显示的信息
39 $('#city').empty();
40 $('#city').append('<option value="0">-请选择-</option>');
41 //遍历追加县市
42 city.each(function(k,v){
43 var nm = $(this).attr('City');
44 var id = $(this).attr('CityID');
45 $('#city').append('<option value='+id+'>'+nm+'</option>');
46 });
47 }
48 //以下函数的逻辑与showcity()的逻辑一致
49 function showdistrict(){
50 //获取 县市 的id
51 var cid = $('#city option:selected').val();
52 //根据xmldom信息 找到指定的县市节点
53 var xml_city = $(xmldom).find('City[CityID='+cid+']');
54 // 获取对应所有地区节点
55 var district = $(xml_city).find('Piecearea');
56 $('#district').empty();
57 $('#district').append('<option value="0">-请选择-</option>');
58 district.each(function(k,v){
59 var nm = $(this).attr('Piecearea');
60 var id = $(this).attr('PieceareaID');
61 $('#district').append('<option value='+id+'>'+nm+'</option>');
62 });
63 }
