用js解析xml實現省市二級聯動

html頁面表單部分

   <select name="province" id="province" onchange="javascript:loadCity();">
            <option value="0" selected="selected">請選擇</option>
          </select>
          <select name="city" id="city"  onchange="javascript:outputAll();">
            <option value="0" selected="selected">請選擇</option>
          </select>
          <input name="" type="button"  class="btn_map_search" onclick="find_network()" />
          <div id="statusTxt"></div>

 

js腳本頁（用ajax實現讀取xml數據）

// JavaScript Document
var http_request=false;
var localPro;
var localCity;
var returnXML;
var returnText;

function initVar()
{
 localPro=document.getElementById("province");
 localCity=document.getElementById("city");
}

function createXMLHttp()
 {
   if(window.XMLHttpRequest) { //Mozilla 瀏覽器
   http_request = new XMLHttpRequest();
   if (http_request.overrideMimeType) {//設置MiME類別
    http_request.overrideMimeType('text/xml');
   }
   }
   else if (window.ActiveXObject) { // IE瀏覽器
   try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     http_request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
 }

function sendRequest()
{
 initVar();
 createXMLHttp();
 http_request.onreadystatechange = processRequest;
 http_request.open("GET","../xml/city.xml", true);
 http_request.send(null);
}

function processRequest()
{
     if (http_request.readyState == 4) { // 判斷對象狀態
        if (http_request.status == 200) { // 信息已經成功返回，開始處理信息
  document.getElementById("statusTxt").innerHTML="";
  setProvince();
            } else { //頁面不正常
                alert("您所請求的頁面有異常。");
            }
        }else {//只要未讀取完成
    document.getElementById("statusTxt").innerHTML="正則讀取數據中……";
  }
}

function setProvince()
{
 returnText=http_request.responseText;
 returnXML=http_request.responseXML;
 var pro=returnXML.getElementsByTagName("title");
 var citys=returnXML.getElementsByTagName("item");
 var cityNodes=citys[0].getElementsByTagName("city");
 enterValue(pro,localPro);
 enterValue(cityNodes,localCity);
 outputAll();
}

function loadCity()
{
 var index=localPro.selectedIndex;
 var cityNode=returnXML.getElementsByTagName("item");
 var curCity=cityNode[index];
 var cityNodes=curCity.getElementsByTagName("city");
 enterValue(cityNodes,localCity);
 outputAll();
}

function enterValue(cell,place)
{
clearPreValue(place);
 for(i=0;i<cell.length;i++){
  var obj= document.createElement("option");
  var doc=document.createTextNode(cell[i].firstChild.nodeValue);
  obj.appendChild(doc);
  place.appendChild(obj);
 }

}

function clearPreValue(pc)
{
 while(pc.hasChildNodes())
 pc.removeChild(pc.childNodes[0]);
}

function outputAll ()
{
 var cellValue= localPro.options[localPro.selectedIndex].firstChild.nodeValue+localCity.options[localCity.selectedIndex].firstChild.nodeValue;
}

 

xml文件

<?xml version="1.0" encoding="utf-8"?>
<china>
 <province>
    <title>請選擇</title>
    <item>
  <city>請選擇</city>
    </item>
  </province>
  <province>
    <title>北京</title>
    <item>
   <city>請選擇</city>
      <city>東城</city>
      <city>西城</city>
      <city>崇文</city>
      <city>宣武</city>
      <city>朝陽</city>
      <city>豐臺</city>
      <city>石景山</city>
      <city>海淀</city>
      <city>門頭溝</city>
      <city>房山</city>
      <city>通州</city>
      <city>順義</city>
      <city>昌平</city>
      <city>大興</city>
      <city>平谷</city>
      <city>懷柔</city>
      <city>密雲</city>
      <city>延慶</city>
    </item>
  </province>
  <province>
    <title>上海</title>
    <item>
 <city>請選擇</city>
      <city>黃浦</city>
      <city>盧灣</city>
      <city>徐匯</city>
      <city>長寧</city>
      <city>靜安</city>
      <city>普陀</city>
      <city>閘北</city>
      <city>虹口</city>
      <city>楊浦</city>
      <city>閔行</city>
      <city>寶山</city>
      <city>嘉定</city>
      <city>浦東</city>
      <city>金山</city>
      <city>松江</city>
      <city>青浦</city>
      <city>南匯</city>
      <city>奉賢</city>
      <city>崇明</city>
    </item>
  </province>
  <province>
    <title>天津</title>
    <item>
 <city>請選擇</city>
      <city>和平</city>
      <city>東麗</city>
      <city>河東</city>
      <city>西青</city>
      <city>河西</city>
      <city>津南</city>
      <city>南開</city>
      <city>北辰</city>
      <city>河北</city>
      <city>武清</city>
      <city>紅撟</city>
      <city>塘沽</city>
      <city>漢沽</city>
      <city>大港</city>
      <city>寧河</city>
      <city>靜海</city>
      <city>寶坻</city>
      <city>薊縣</city>
    </item>
  </province>
  <province>
    <title>重慶</title>
    <item>
 <city>請選擇</city>
      <city>萬州</city>
      <city>涪陵</city>
      <city>渝中</city>
      <city>大渡口</city>
      <city>江北</city>
      <city>沙坪壩</city>
      <city>九龍坡</city>
      <city>南岸</city>
      <city>北碚</city>
      <city>萬盛</city>
      <city>雙撟</city>
      <city>渝北</city>
      <city>巴南</city>
      <city>黔江</city>
      <city>長壽</city>
      <city>綦江</city>
      <city>潼南</city>
      <city>銅梁</city>
      <city>大足</city>
      <city>榮昌</city>
      <city>壁山</city>
      <city>梁平</city>
      <city>城口</city>
      <city>豐都</city>
      <city>墊江</city>
      <city>武隆</city>
      <city>忠縣</city>
      <city>開縣</city>
      <city>雲陽</city>
      <city>奉節</city>
      <city>巫山</city>
      <city>巫溪</city>
      <city>石柱</city>
      <city>秀山</city>
      <city>酉陽</city>
      <city>彭水</city>
      <city>江津</city>
      <city>合川</city>
      <city>永川</city>
      <city>南川</city>
    </item>
  </province>
  <province>
    <title>河北</title>
    <item>
 <city>請選擇</city>
      <city>石家莊</city>
      <city>邯鄲</city>
      <city>邢臺</city>
      <city>保定</city>
      <city>張家口</city>
      <city>承德</city>
      <city>廊坊</city>
      <city>唐山</city>
      <city>秦皇島</city>
      <city>滄州</city>
      <city>衡水</city>
    </item>
  </province>
  <province>
    <title>山西</title>
    <item>
 <city>請選擇</city>
      <city>太原</city>
      <city>大同</city>
      <city>陽泉</city>
      <city>長治</city>
      <city>晉城</city>
      <city>朔州</city>
      <city>呂梁</city>
      <city>忻州</city>
      <city>晉中</city>
      <city>臨汾</city>
      <city>運城</city>
    </item>
  </province>
  <province>
    <title>內蒙古</title>
    <item>
 <city>請選擇</city>
      <city>呼和浩特</city>
      <city>包頭</city>
      <city>烏海</city>
      <city>赤峯</city>
      <city>呼倫貝爾盟</city>
      <city>阿拉善盟</city>
      <city>哲裏木盟</city>
      <city>興安盟</city>
      <city>烏蘭察布盟</city>
      <city>錫林郭勒盟</city>
      <city>巴彥淖爾盟</city>
      <city>鄂市</city>
    </item>
  </province>
  <province>
    <title>遼寧</title>
    <item>
 <city>請選擇</city>
      <city>瀋陽</city>
      <city>大連</city>
      <city>鞍山</city>
      <city>撫順</city>
      <city>本溪</city>
      <city>丹東</city>
      <city>錦州</city>
      <city>營口</city>
      <city>阜新</city>
      <city>遼陽</city>
      <city>盤錦</city>
      <city>鐵嶺</city>
      <city>朝陽</city>
      <city>葫蘆島</city>
    </item>
  </province>
  <province>

    <title>吉林</title>
    <item>
 <city>請選擇</city>
      <city>長春</city>
      <city>吉林</city>
      <city>四平</city>
      <city>遼源</city>
      <city>通化</city>
      <city>白山</city>
      <city>松原</city>
      <city>白城</city>
      <city>延邊</city>
    </item>
  </province>
  <province>
    <title>黑龍江</title>
    <item>
 <city>請選擇</city>
      <city>哈爾濱</city>
      <city>齊齊哈爾</city>
      <city>牡丹江</city>
      <city>佳木斯</city>
      <city>大慶</city>
      <city>綏化</city>
      <city>鶴崗</city>
      <city>雞西</city>
      <city>黑河</city>
      <city>雙鴨山</city>
      <city>伊春</city>
      <city>七臺河</city>
      <city>大興安嶺</city>
    </item>
  </province>
  <province>
    <title>江蘇</title>
    <item>
 <city>請選擇</city>
      <city>南京</city>
      <city>鎮江</city>
      <city>蘇州</city>
      <city>南通</city>
      <city>揚州</city>
      <city>鹽城</city>
      <city>徐州</city>
      <city>連雲港</city>
      <city>常州</city>
      <city>無錫</city>
      <city>宿遷</city>
      <city>泰州</city>
      <city>淮安</city>
    </item>
  </province>
  <province>
    <title>浙江</title>
    <item>
 <city>請選擇</city>
      <city>杭州</city>
      <city>寧波</city>
      <city>溫州</city>
      <city>嘉興</city>
      <city>湖州</city>
      <city>紹興</city>
      <city>金華</city>
      <city>衢州</city>
      <city>舟山</city>
      <city>台州</city>
      <city>麗水</city>
    </item>
  </province>
  <province>
    <title>安徽</title>
    <item>
 <city>請選擇</city>
      <city>合肥</city>
      <city>蕪湖</city>
      <city>蚌埠</city>
      <city>馬鞍山</city>
      <city>淮北</city>
      <city>銅陵</city>
      <city>安慶</city>
      <city>黃山</city>
      <city>滁州</city>
      <city>宿州</city>
      <city>池州</city>
      <city>淮南</city>
      <city>巢湖</city>
      <city>阜陽</city>
      <city>六安</city>
      <city>宣城</city>
      <city>亳州</city>
    </item>
  </province>
  <province>
    <title>福建</title>
    <item>
 <city>請選擇</city>
      <city>福州</city>
      <city>廈門</city>
      <city>莆田</city>
      <city>三明</city>
      <city>泉州</city>
      <city>漳州</city>
      <city>南平</city>
      <city>龍巖</city>
      <city>寧德</city>
    </item>
  </province>
  <province>
    <title>江西</title>
    <item>
 <city>請選擇</city>
      <city>南昌市</city>
      <city>景德鎮</city>
      <city>九江</city>
      <city>鷹潭</city>
      <city>萍鄉</city>
      <city>新餘</city>
      <city>贛州</city>
      <city>吉安</city>
      <city>宜春</city>
      <city>撫州</city>
      <city>上饒</city>
    </item>
  </province>
  <province>
    <title>山東</title>
    <item>
 <city>請選擇</city>
      <city>濟南</city>
      <city>青島</city>
      <city>淄博</city>
      <city>棗莊</city>
      <city>東營</city>
      <city>煙臺</city>
      <city>濰坊</city>
      <city>濟寧</city>
      <city>泰安</city>
      <city>威海</city>
      <city>日照</city>
      <city>萊蕪</city>
      <city>臨沂</city>
      <city>德州</city>
      <city>聊城</city>
      <city>濱州</city>
      <city>菏澤</city>
    </item>
  </province>
  <province>
    <title>河南</title>
    <item>
 <city>請選擇</city>
      <city>鄭州</city>
      <city>開封</city>
      <city>洛陽</city>
      <city>平頂山</city>
      <city>安陽</city>
      <city>鶴壁</city>
      <city>新鄉</city>
      <city>焦作</city>
      <city>濮陽</city>
      <city>許昌</city>
      <city>漯河</city>
      <city>三門峽</city>
      <city>南陽</city>
      <city>商丘</city>
      <city>信陽</city>
      <city>周口</city>
      <city>駐馬店</city>
      <city>濟源</city>
    </item>
  </province>
  <province>
    <title>湖北</title>
    <item>
 <city>請選擇</city>
      <city>武漢</city>
      <city>鄂州</city>
      <city>宜昌</city>
      <city>荊州</city>
      <city>襄樊</city>
      <city>黃石</city>
      <city>荊門</city>
      <city>黃岡</city>
      <city>十堰</city>
      <city>恩施</city>
      <city>潛江</city>
      <city>天門</city>
      <city>仙桃</city>
      <city>隨州</city>
      <city>咸寧</city>
      <city>孝感</city>
    </item>
  </province>
  <province>
    <title>湖南</title>
    <item>
 <city>請選擇</city>
      <city>長沙</city>
      <city>常德</city>
      <city>株洲</city>
      <city>湘潭</city>
      <city>衡陽</city>
      <city>岳陽</city>
      <city>邵陽</city>
      <city>益陽</city>
      <city>婁底</city>
      <city>懷化</city>
      <city>郴州</city>
      <city>永州</city>
      <city>湘西</city>
      <city>張家界</city>
    </item>
  </province>
  <province>
    <title>廣東</title>
    <item>
 <city>請選擇</city>
      <city>廣州</city>
      <city>深圳</city>
      <city>珠海</city>
      <city>汕頭</city>
      <city>東莞</city>
      <city>中山</city>
      <city>佛山</city>
      <city>韶關</city>
      <city>江門</city>
      <city>湛江</city>
      <city>茂名</city>
      <city>肇慶</city>
      <city>惠州</city>
      <city>梅州</city>
      <city>汕尾</city>
      <city>河源</city>
      <city>陽江</city>
      <city>清遠</city>
      <city>潮州</city>
      <city>揭陽</city>
      <city>雲浮</city>
    </item>
  </province>
  <province>
    <title>廣西</title>
    <item>
 <city>請選擇</city>
      <city>南寧</city>
      <city>柳州</city>
      <city>桂林</city>
      <city>梧州</city>
      <city>北海</city>
      <city>防城港</city>
      <city>欽州</city>
      <city>貴港</city>
      <city>玉林</city>
      <city>南寧地區</city>
      <city>柳州地區</city>
      <city>賀州</city>
      <city>百色</city>
      <city>河池</city>
    </item>
  </province>
  <province>
    <title>海南</title>
    <item>
 <city>請選擇</city>
      <city>海口</city>
      <city>三亞</city>
    </item>
  </province>
  <province>
    <title>四川</title>
    <item>
 <city>請選擇</city>
      <city>成都</city>
      <city>綿陽</city>
      <city>德陽</city>
      <city>自貢</city>
      <city>攀枝花</city>
      <city>廣元</city>
      <city>內江</city>
      <city>樂山</city>
      <city>南充</city>
      <city>宜賓</city>
      <city>廣安</city>
      <city>達川</city>
      <city>雅安</city>
      <city>眉山</city>
      <city>甘孜</city>
      <city>涼山</city>
      <city>瀘州</city>
    </item>
  </province>
  <province>
    <title>貴州</title>
    <item>
 <city>請選擇</city>
      <city>貴陽</city>
      <city>六盤水</city>
      <city>遵義</city>
      <city>安順</city>
      <city>銅仁</city>
      <city>黔西南</city>
      <city>畢節</city>
      <city>黔東南</city>
      <city>黔南</city>
    </item>
  </province>
  <province>
    <title>雲南</title>
    <item>
 <city>請選擇</city>
      <city>昆明</city>
      <city>大理</city>
      <city>曲靖</city>
      <city>玉溪</city>
      <city>昭通</city>
      <city>楚雄</city>
      <city>紅河</city>
      <city>文山</city>
      <city>思茅</city>
      <city>西雙版納</city>
      <city>保山</city>
      <city>德宏</city>
      <city>麗江</city>
      <city>怒江</city>
      <city>迪慶</city>
      <city>臨滄</city>
    </item>
  </province>
  <province>
    <title>西藏</title>
    <item>
 <city>請選擇</city>
      <city>拉薩</city>
      <city>日喀則</city>
      <city>山南</city>
      <city>林芝</city>
      <city>昌都</city>
      <city>阿里</city>
      <city>那曲</city>
    </item>
  </province>
  <province>
    <title>陝西</title>
    <item>
 <city>請選擇</city>
      <city>西安</city>
      <city>寶雞</city>
      <city>咸陽</city>
      <city>銅川</city>
      <city>渭南</city>
      <city>延安</city>
      <city>榆林</city>
      <city>漢中</city>
      <city>安康</city>
      <city>商洛</city>
    </item>
  </province>
  <province>
    <title>甘肅</title>
    <item>
 <city>請選擇</city>
      <city>蘭州</city>
      <city>嘉峪關</city>
      <city>金昌</city>
      <city>白銀</city>
      <city>天水</city>
      <city>酒泉</city>
      <city>張掖</city>
      <city>武威</city>
      <city>定西</city>
      <city>隴南</city>
      <city>平涼</city>
      <city>慶陽</city>
      <city>臨夏</city>
      <city>甘南</city>
    </item>
  </province>
  <province>
    <title>寧夏</title>
    <item>
 <city>請選擇</city>
      <city>銀川</city>
      <city>石嘴山</city>
      <city>吳忠</city>
      <city>固原</city>
    </item>
  </province>
  <province>
    <title>青海</title>
    <item>
 <city>請選擇</city>
      <city>西寧</city>
      <city>海東</city>
      <city>海南</city>
      <city>海北</city>
      <city>黃南</city>
      <city>玉樹</city>
      <city>果洛</city>
      <city>海西</city>
    </item>
  </province>
  <province>
    <title>新疆</title>
    <item>
 <city>請選擇</city>
      <city>烏魯木齊</city>
      <city>石河子</city>
      <city>克拉瑪依</city>
      <city>伊犁</city>
      <city>巴音郭勒</city>
      <city>昌吉</city>
      <city>克孜勒蘇柯爾克孜</city>
      <city>博爾塔拉</city>
      <city>吐魯番</city>
      <city>哈密</city>
      <city>喀什</city>
      <city>和田</city>
      <city>阿克蘇</city>
    </item>
  </province>
  <province>
    <title>香港</title>
    <item>
 <city>請選擇</city>
      <city>香港</city>
    </item>
  </province>
  <province>
    <title>澳門</title>
    <item>
 <city>請選擇</city>
      <city>澳門</city>
    </item>
  </province>
  <province>
    <title>臺灣</title>
    <item>
 <city>請選擇</city>
      <city>臺北</city>
      <city>高雄</city>
      <city>臺中</city>
      <city>臺南</city>
      <city>屏東</city>
      <city>南投</city>
      <city>雲林</city>
      <city>新竹</city>
      <city>彰化</city>
      <city>苗栗</city>
      <city>嘉義</city>
      <city>花蓮</city>
      <city>桃園</city>
      <city>宜蘭</city>
      <city>基隆</city>
      <city>臺東</city>
      <city>金門</city>
      <city>馬祖</city>
      <city>澎湖</city>
    </item>
  </province>
  <province>
    <title>其它</title>
    <item>
 <city>請選擇</city>
      <city>北美洲</city>
      <city>南美洲</city>
      <city>亞洲</city>
      <city>非洲</city>
      <city>歐洲</city>
      <city>大洋洲</city>
    </item>
  </province>
</china>