<?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>

//聲明一個全局變量，用于存儲第一次請求的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>');
 });
 }