使用 Jquery+Ajax+xml制造中国地区选择三级联动菜单
使用 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 }