本文實例講述了javascript解析xml實現省市縣三級聯動的方法。分享給大家供大家參考。具體實現方法如下：
（該方法適用於任何常用浏覽器）
<body>
<div>
<span>
<select id="sheng" style="width: 100px"></select>
</span>
<span>
<select id="shi" style="width: 100px"></select>
</span>
<span>
<select id="xian" style="width: 100px"></select>
</span>
</div>
</body>
</html>
<script type="text/javascript">
<!--
function getXmlDoc(){
var xmlDoc;
try{
//給IE浏覽器 創建一個空的微軟 XML文檔對象
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}catch(err){
try{
//在 Firefox及其他浏覽器(opera)中的 XML解析器創建一個空的 XML文檔對象。
xmlDoc=document.implementation.createDocument("","",null);
}catch(er){
alert("所使用的浏覽器版本太低了,該換更新了");
}
}
//關閉異步加載，這樣確保在文檔完全加載之前解析器不會繼續腳本的執行
xmlDoc.async=false;
//解析器加載名為 "xxx.xml" 的 XML 文檔
xmlDoc.load("city.xml");
return xmlDoc;
}
window.onload=function(){
var xmlDoc=getXmlDoc();
//獲取xml文件的根節點
var root=xmlDoc.documentElement;
//獲取xml文件的根節點下面的省節點
var provinces=root.childNodes;
//獲取頁面中要顯示的省、市和縣的控件dom對象
var sheng=document.getElementById("sheng");
var shi=document.getElementById("shi");
var xian=document.getElementById("xian");
//遍歷所有的省
for(var i=0;i<provinces.length;i++){
//查看該節點是否是元素節點 也是為了實現不同浏覽器之間的兼容性 問 題(1是元素節點 Node.ELEMENT_NODE ---1 -- 元素節點)
if(provinces[i].nodeType==1){
//創建一個option節點對象
var shengopt=document.createElement("option");
//為option省節點添加文本 shengopt.appendChild(document.createTextNode(provinces[i].getAttr ibute("name")));
//為option省節點設置屬性 shengopt.setAttribute("value",provinces[i].getAttribute("postcode "));
//添加省到頁面dom對象中
sheng.appendChild(shengopt);
}
}
//當省節點發生改變時 觸發事件
sheng.onchange=function(){
//獲取省節點所有的option對象的集合
var shengs=sheng.options;
//獲取選中option對象的selectedIndex(下標值)
var num=shengs.selectedIndex;
//清空市 區
shi.length=0;
xian.length=0;
//根據選中的省獲取其value值的內容 即xml文件中的postcode對應的 值
var ppostcode=shengs[num].getAttribute("value");
//遍歷所有的省
for(var i=0;i<provinces.length;i++){
//查看該節點是否是元素節點 也是為了實現不同浏覽器之間的兼 容性問題(1是元素節點 Node.ELEMENT_NODE ---1 -- 元素 節點)
if(provinces[i].nodeType==1){
//根據省獲取其postcode值的內容 即html文件中的value對應 的值
var postcode=provinces[i].getAttribute("postcode");
if(postcode==ppostcode){
//獲取省節點的子節點
var cities=provinces[i].childNodes;
//清空
shi.length=0;
//遍歷所有的市
for(var i=0;i<cities.length;i++){
//查看該節點是否是元素節點 也是為了實現不同浏覽 器之間的兼容性問題(1是元素節點 Node.ELEMENT_NODE ---1 -- 元素節點)
if(cities[i].nodeType==1){
//創建一個option節點對象
var shiopt=document.createElement("option");
//為option市節點添加文本 shiopt.appendChild(document.createTextNode(cities[i].getAttribute ("name")));
//為option市節點設置屬性
shiopt.setAttribute("value", cities[i].getAttribute("postcode"));
//添加市到頁面dom對象中
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
//當市節點發生改變時 觸發事件
shi.onchange=function(){
//獲取市節點所有的option對象的集合
var shis=shi.options;
//獲取選中option對象的selectedIndex(下標值)
var num=shis.selectedIndex;
//根據選中的市獲取其value值的內容 即xml文件中的postcode對應的 值
var spostcode=shis[num].getAttribute("value");
//遍歷所有的省
for(var i=0;i<provinces.length;i++){
//查看該節點是否是元素節點 也是為了實現不同浏覽器之間的兼 容性問題(1是元素節點 Node.ELEMENT_NODE ---1 -- 元素 節點)
if(provinces[i].nodeType==1){
//獲取省節點的子節點
var cities=provinces[i].childNodes;
//遍歷所有的市
for(var j=0;j<cities.length;j++){
//查看該節點是否是元素節點 也是為了實現不同浏覽器之 間的兼容性問題(1是元素節點 Node.ELEMENT_NODE ---1 -- 元素節點)
if(cities[j].nodeType==1){
//根據市獲取其postcode值的內容 即html文件中的 value對應的值
var postcode=cities[j].getAttribute("postcode");
if(postcode==spostcode){
//清空
xian.length=0;
//獲取市節點的子節點
var areas=cities[j].childNodes;
//遍歷所有的區(縣)
for(var k=0;k<areas.length;k++){
//查看該節點是否是元素節點 也是為了實現不 同浏覽器之間的兼容性問題(1是元素節點 Node.ELEMENT_NODE ---1 -- 元素節點)
if(areas[k].nodeType==1){
//創建一個option節點對象
var xianopt=document.createElement("option");
//為option區節點添加文本
xianopt.appendChild(document.createTextNode(areas[k].getAttribute ("name")));
//為option區節點設置屬性
xianopt.setAttribute("value", areas[k].getAttribute("postcode"));
//添加區到頁面dom對象中
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
//-->
</script>
Xml文件（簡寫版）
<root name="中國">
<province name="請選擇省" postcode="100000" >
<city name="請選擇市" postcode="100100" >
<area name="請選擇區" postcode="100101" />
</city>
</province>
<province name="北京市" postcode="110000" >
<city name="市轄區" postcode="110100" >
<area name="東城區" postcode="110101" />
<area name="西城區" postcode="110102" />
<area name="崇文區" postcode="110103" />
<area name="宣武區" postcode="110104" />
<area name="朝陽區" postcode="110105" />
<area name="豐台區" postcode="110106" />
<area name="石景山區" postcode="110107" />
<area name="海澱區" postcode="110108" />
<area name="門頭溝區" postcode="110109" />
<area name="房山區" postcode="110111" />
<area name="通州區" postcode="110112" />
<area name="順義區" postcode="110113" />
<area name="昌平區" postcode="110114" />
<area name="大興區" postcode="110115" />
<area name="懷柔區" postcode="110116" />
<area name="平谷區" postcode="110117" />
</city>
<city name="縣" postcode="110200" >
<area name="密雲縣" postcode="110228" />
<area name="延慶縣" postcode="110229" />
</city>
</province>
</root>
希望本文所述對大家的javascript程序設計有所幫助。