此处选用的xml文档(共1000多行)主要结构如下：
<?xml version="1.0" encoding="utf-8"?> <area Country="China"> <province provinceID="110000" province="北京市"> <City CityID="110100" City="市辖区"> <Piecearea PieceareaID="110101" Piecearea="东城区" /> <Piecearea PieceareaID="110102" Piecearea="西城区" /> <Piecearea PieceareaID="110103" Piecearea="崇文区" /> <Piecearea PieceareaID="110104" Piecearea="宣武区" /> <Piecearea PieceareaID="110105" Piecearea="朝阳区" /> <Piecearea PieceareaID="110106" Piecearea="丰台区" /> <Piecearea PieceareaID="110107" Piecearea="石景山区" /> <Piecearea PieceareaID="110108" Piecearea="海淀区" /> <Piecearea PieceareaID="110109" Piecearea="门头沟区" /> <Piecearea PieceareaID="110111" Piecearea="房山区" /> <Piecearea PieceareaID="110112" Piecearea="通州区" /> <Piecearea PieceareaID="110113" Piecearea="顺义区" /> <Piecearea PieceareaID="110114" Piecearea="昌平区" /> <Piecearea PieceareaID="110115" Piecearea="大兴区" /> <Piecearea PieceareaID="110116" Piecearea="怀柔区" /> <Piecearea PieceareaID="110117" Piecearea="平谷区" /> </City> <province>
制作对应的表单，根据设置选择省/市的动作:
<h2>地区三级联动菜单</h2> 省:<select onchange="showcity()"><option value="0">-请选择-</option></select> 市:<select onchange="showdistrict()"><option value="0">-请选择-</option></select> 地区:<select><option value="0">-请选择-</option></select>
以下是JS代码行
//声明一个全局变量，用于存储第一次请求的xml信息,避免后续多次频繁请求xml var xmldom =null; //获取并显示省份信息 function showprovince(){ //使用ajax去服务器获得xml文件里面的省份信息 $.ajax({ url:'./ChinaArea.xml', //data: dataType:'xml',//相当于调用responseXML type:'get', success:function(msg){ //将返回的xml信息赋予xmldom xmldom = msg; //获得province 元素节点对象 var prov = $(msg).find('province'); //遍历省份信息 prov.each(function(k,v){ var nm = $(this).attr('province'); var id = $(this).attr('provinceID'); //追加到指定的节点 $('#province').append("<option value="+id+">"+nm+"</option>"); }); } }); } //网页加载显示省份信息 $(function(){ showprovince(); }); function showcity(){ //获取 省份 的id var pid = $('#province option:selected').val(); //根据xmldom信息 找到指定的省份节点 var xml_province = $(xmldom).find('province[provinceID='+pid+']'); // 获取对应所有县市节点 var city = $(xml_province).find('City'); //在遍历追加前，先清空此前已经显示的信息 $('#city').empty(); $('#city').append('<option value="0">-请选择-</option>'); //遍历追加县市 city.each(function(k,v){ var nm = $(this).attr('City'); var id = $(this).attr('CityID'); $('#city').append('<option value='+id+'>'+nm+'</option>'); }); } //以下函数的逻辑与showcity()的逻辑一致 function showdistrict(){ //获取 县市 的id var cid = $('#city option:selected').val(); //根据xmldom信息 找到指定的县市节点 var xml_city = $(xmldom).find('City[CityID='+cid+']'); // 获取对应所有地区节点 var district = $(xml_city).find('Piecearea'); $('#district').empty(); $('#district').append('<option value="0">-请选择-</option>'); district.each(function(k,v){ var nm = $(this).attr('Piecearea'); var id = $(this).attr('PieceareaID'); $('#district').append('<option value='+id+'>'+nm+'</option>'); }); }
以上这篇Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: