<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瀏覽器 創(chuàng)建一個空的微軟 XML文檔對象
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}catch(err){
try{
//在 Firefox及其他瀏覽器(opera)中的 XML解析器創(chuàng)建一個空的 XML文檔對象。 
xmlDoc=document.implementation.createDocument("","",null);
}catch(er){
alert("所使用的瀏覽器版本太低了,該換更新了");
}
}
//關(guān)閉異步加載，這樣確保在文檔完全加載之前解析器不會繼續(xù)腳本的執(zhí)行
xmlDoc.async=false;
//解析器加載名為 "xxx.xml" 的 XML 文檔
xmlDoc.load("city.xml");
return xmlDoc;
}
window.onload=function(){
var xmlDoc=getXmlDoc();
//獲取xml文件的根節(jié)點
var root=xmlDoc.documentElement;
//獲取xml文件的根節(jié)點下面的省節(jié)點
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++){
 //查看該節(jié)點是否是元素節(jié)點 也是為了實現(xiàn)不同瀏覽器之間的兼容性 問 題(1是元素節(jié)點 Node.ELEMENT_NODE  ---1  -- 元素節(jié)點)
if(provinces[i].nodeType==1){
//創(chuàng)建一個option節(jié)點對象
var shengopt=document.createElement("option");
//為option省節(jié)點添加文本 shengopt.appendChild(document.createTextNode(provinces[i].getAttr ibute("name")));
//為option省節(jié)點設置屬性 shengopt.setAttribute("value",provinces[i].getAttribute("postcode "));
  //添加省到頁面dom對象中
sheng.appendChild(shengopt);
}
}
//當省節(jié)點發(fā)生改變時 觸發(fā)事件
sheng.onchange=function(){
//獲取省節(jié)點所有的option對象的集合
var shengs=sheng.options;
//獲取選中option對象的selectedIndex(下標值)
var num=shengs.selectedIndex;
//清空市 區(qū)  
shi.length=0;
xian.length=0;
//根據(jù)選中的省獲取其value值的內(nèi)容 即xml文件中的postcode對應的 值
var ppostcode=shengs[num].getAttribute("value");
//遍歷所有的省
for(var i=0;i<provinces.length;i++){
//查看該節(jié)點是否是元素節(jié)點 也是為了實現(xiàn)不同瀏覽器之間的兼 容性問題(1是元素節(jié)點 Node.ELEMENT_NODE  ---1  -- 元素 節(jié)點)
if(provinces[i].nodeType==1){
//根據(jù)省獲取其postcode值的內(nèi)容 即html文件中的value對應 的值
var postcode=provinces[i].getAttribute("postcode");
if(postcode==ppostcode){
//獲取省節(jié)點的子節(jié)點
var cities=provinces[i].childNodes;
//清空
shi.length=0;
//遍歷所有的市
for(var i=0;i<cities.length;i++){
//查看該節(jié)點是否是元素節(jié)點 也是為了實現(xiàn)不同瀏覽 器之間的兼容性問題(1是元素節(jié)點 Node.ELEMENT_NODE  ---1  -- 元素節(jié)點)
if(cities[i].nodeType==1){
//創(chuàng)建一個option節(jié)點對象
var shiopt=document.createElement("option");
//為option市節(jié)點添加文本 shiopt.appendChild(document.createTextNode(cities[i].getAttribute ("name")));
//為option市節(jié)點設置屬性
shiopt.setAttribute("value", cities[i].getAttribute("postcode"));
 //添加市到頁面dom對象中
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
//當市節(jié)點發(fā)生改變時 觸發(fā)事件
shi.onchange=function(){
//獲取市節(jié)點所有的option對象的集合
var shis=shi.options;
//獲取選中option對象的selectedIndex(下標值)
var num=shis.selectedIndex;
//根據(jù)選中的市獲取其value值的內(nèi)容 即xml文件中的postcode對應的 值
var spostcode=shis[num].getAttribute("value");
//遍歷所有的省
for(var i=0;i<provinces.length;i++){
//查看該節(jié)點是否是元素節(jié)點 也是為了實現(xiàn)不同瀏覽器之間的兼 容性問題(1是元素節(jié)點 Node.ELEMENT_NODE  ---1  -- 元素 節(jié)點)
if(provinces[i].nodeType==1){
//獲取省節(jié)點的子節(jié)點
var cities=provinces[i].childNodes;
//遍歷所有的市
for(var j=0;j<cities.length;j++){
//查看該節(jié)點是否是元素節(jié)點 也是為了實現(xiàn)不同瀏覽器之 間的兼容性問題(1是元素節(jié)點 Node.ELEMENT_NODE   ---1  -- 元素節(jié)點)
if(cities[j].nodeType==1){
//根據(jù)市獲取其postcode值的內(nèi)容 即html文件中的 value對應的值
var postcode=cities[j].getAttribute("postcode");
if(postcode==spostcode){
//清空
xian.length=0;
//獲取市節(jié)點的子節(jié)點
var areas=cities[j].childNodes;
//遍歷所有的區(qū)(縣)
for(var k=0;k<areas.length;k++){
//查看該節(jié)點是否是元素節(jié)點 也是為了實現(xiàn)不 同瀏覽器之間的兼容性問題(1是元素節(jié)點 Node.ELEMENT_NODE  ---1  -- 元素節(jié)點)
if(areas[k].nodeType==1){
//創(chuàng)建一個option節(jié)點對象
var xianopt=document.createElement("option");
//為option區(qū)節(jié)點添加文本
xianopt.appendChild(document.createTextNode(areas[k].getAttribute ("name")));
//為option區(qū)節(jié)點設置屬性
xianopt.setAttribute("value", areas[k].getAttribute("postcode"));
 //添加區(qū)到頁面dom對象中
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
//-->
</script>

Xml文件（簡寫版）

<root name="中國">
 <province name="請選擇省" postcode="100000" >
  <city name="請選擇市" postcode="100100" >
 <area name="請選擇區(qū)" postcode="100101" />
</city>
 </province>
 <province name="北京市" postcode="110000" >
  <city name="市轄區(qū)" postcode="110100" >
    <area name="東城區(qū)" postcode="110101" />
    <area name="西城區(qū)" postcode="110102" />
    <area name="崇文區(qū)" postcode="110103" />
    <area name="宣武區(qū)" postcode="110104" />
    <area name="朝陽區(qū)" postcode="110105" />
    <area name="豐臺區(qū)" postcode="110106" />
    <area name="石景山區(qū)" postcode="110107" />
    <area name="海淀區(qū)" postcode="110108" />
    <area name="門頭溝區(qū)" postcode="110109" />
    <area name="房山區(qū)" postcode="110111" />
    <area name="通州區(qū)" postcode="110112" />
    <area name="順義區(qū)" postcode="110113" />
    <area name="昌平區(qū)" postcode="110114" />
    <area name="大興區(qū)" postcode="110115" />
    <area name="懷柔區(qū)" postcode="110116" />
    <area name="平谷區(qū)" postcode="110117" />
  </city>
  <city name="縣" postcode="110200" >
    <area name="密云縣" postcode="110228" />
    <area name="延慶縣" postcode="110229" />
  </city>
 </province>
</root>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章: