用Jquery+Ajax+xml制作三级联动效果
Jun 22, 2017 pm 05:46 PM下面小编就为大家带来一篇Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文主要介绍使用 Jquery+Ajax+xml,首先需要一个包含我国所有地图信息的xml文档。
此处选用的xml文档(共1000多行)主要结构如下:
<?xml version="1.0" encoding="utf-8"?> <area Country="China"> <province ID="1" 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 id="province" onchange="showcity()"><option value="0">-请选择-</option></select> 市:<select id="city" onchange="showdistrict()"><option value="0">-请选择-</option></select> 地区:<select id="district"><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>'); }); }
Atas ialah kandungan terperinci 用Jquery+Ajax+xml制作三级联动效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih

Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara

Animasi klasik Zhengtu IPx 'Perjalanan ke Barat' Perjalanan ke barat adalah tanpa rasa takut dan tanpa rasa takut

Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos

Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat

Kaedah khusus untuk mencipta kesan pergerakan filem dalam PPT

Ulasan Colorful Hidden Star P15 24: Komputer riba permainan serba tegar dengan penampilan dan prestasi yang baik

Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja.
