欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript解析xml實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法

 更新時(shí)間：2015年07月25日 16:50:18   作者：whylyq  
這篇文章主要介紹了javascript解析xml實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法,涉及javascript針對(duì)節(jié)點(diǎn)的操作與XML文件解析的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript解析xml實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

（該方法適用于任何常用瀏覽器）

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

Xml文件（簡(jiǎn)寫(xiě)版）

<root name="中國(guó)">
 <province name="請(qǐng)選擇省" postcode="100000" >
  <city name="請(qǐng)選擇市" postcode="100100" >
 <area name="請(qǐng)選擇區(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="朝陽(yáng)區(qū)" postcode="110105" />
    <area name="豐臺(tái)區(qū)" postcode="110106" />
    <area name="石景山區(qū)" postcode="110107" />
    <area name="海淀區(qū)" postcode="110108" />
    <area name="門(mén)頭溝區(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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論