Use Jquery + Ajax + xml to create a three-level linkage menu in China.

Use Jquery + Ajax + xml to create a three-level linkage menu in China.

This article describes how to use Jquery + Ajax + xml. First, an xml document containing all MAP information in China is required.

The main structure of the selected xml document (more than 1000 lines in total) is as follows:

1 <? Xml version = "1.0" encoding = "UTF-8"?> 2 <area Country = "China"> 3 <province ID = "1" provinceID = "110000" province = "Beijing"> 4 <City CityID = "110100" City = "City District "> 5 <Piecearea PieceareaID =" 110101 "Piecearea =" Dongcheng District "/> 6 <Piecearea PieceareaID =" 110102 "Piecearea =" Xicheng district "/> 7 <Piecearea PieceareaID =" 110103" piecearea = "Chongwen District"/> 8 <Piecearea PieceareaID = "110104" Piecearea = "Xuanwu District"/> 9 <Piecearea PieceareaID = "110105" Piecearea = "Chaoyang District"/> 10 pieceareaID = "110106" Piecearea = "Fengtai District"/> 11 <Piecearea PieceareaID = "110107" Piecearea = "Shijingshan district"/> 12 <Piecearea PieceareaID = "110108" Piecearea =" /> 13 <Piecearea PieceareaID = "110109" Piecearea = "Mentougou District"/> 14 <Piecearea hour = "110111" Piecearea = "Fangshan District"/> 15 <Piecearea PieceareaID = "110112" piecearea = "Tongzhou District"/> 16 <Piecearea PieceareaID = "110113" Piecearea = "Shunyi District"/> 17 <Piecearea PieceareaID = "110114" Piecearea = "Changping District"/> 18 <Piecearea copyright = "110115" Piecearea = "Daxing District"/> 19 <Piecearea PieceareaID = "110116" Piecearea = "Huairou district"/> 20 <Piecearea PieceareaID = "110117" Piecearea = "Pinggu district" /> 21 </City> 22 <province>

 

Create a corresponding form and select the province/city action according to the settings:

1 
Below is the JS Code line
1 // declare a global variable to store the xml Information of the first request to avoid frequent requests to xml 2 var xmldom = null; 3 // obtain and display the province information 4 function showprovince () {5 // use ajax to get the province information in the xml file 6 $. ajax ({7 url :'. /chinereea. xml', 8 // data: 9 dataType: 'xml', // equivalent to calling responseXML10 type: 'get', 11 success: function (msg) {12 // assign the returned xml Information to xmldom13 xmldom = msg; 14 // obtain the province Element Node object 15 var prov = $ (msg ). find ('province '); 16 // traverses the province Information 17 prov. each (function (k, v) {18 var nm = $ (this ). attr ('province '); 19 var id = $ (this ). attr ('provinceid'); 20 // append to the specified node 21 $ ('# province '). append ("<option value =" + id + ">" + nm + "</option>"); 22}); 23} 24 25 }); 26} 27 // province information displayed during webpage loading 28 $ (function () {29 showprovince (); 30}); 31 function showcity () {32 // obtain the province's id33 var pid =$ ('# province option: selected '). val (); 34 // locate the specified province node 35 var xml_province =$ (xmldom) based on xmldom information ). find ('province [provinceID = '+ pid +'] '); 36 // obtain 37 var city = $ (xml_province) for all county and city nodes ). find ('city'); 38 // clear the previously displayed information 39 $ ('# City') before traversing the append '). empty (); 40 $ ('# City '). append ('<option value = "0">-select-</option>'); 41 // traverse the append city 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 // the logic of the following functions is consistent with that of showcity () 49 function showdistrict () {50 // obtain the id51 var cid of the city and city = $ ('# city option: selected '). val (); 52 // locate the specified city node 53 var xml_city = $ (xmldom) based on xmldom information ). find ('city [CityID = '+ cid +'] '); 54 // obtain 55 var district = $ (xml_city) for all region nodes ). find ('piecearea '); 56 $ (' # district '). empty (); 57 $ ('# district '). append ('<option value = "0">-select-</option>'); 58 district. each (function (k, v) {59 var nm = $ (this ). attr ('piecearea '); 60 var id = $ (this ). attr ('pieceareid'); 61 $ ('# district '). append ('<option value =' + id + '>' + nm + '</option>'); 62}); 63}