javascript解析xml實(shí)現(xiàn)省市縣三級聯(lián)動的方法
更新時(shí)間：2015年07月25日 16:50:18 作者：whylyq
這篇文章主要介紹了javascript解析xml實(shí)現(xiàn)省市縣三級聯(lián)動的方法,涉及javascript針對節(jié)點(diǎn)的操作與XML文件解析的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了javascript解析xml實(shí)現(xiàn)省市縣三級聯(lián)動的方法。分享給大家供大家參考。具體實(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)建一個空的微軟 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é)點(diǎn)
var root=xmlDoc.documentElement;
//獲取xml文件的根節(jié)點(diǎn)下面的省節(jié)點(diǎn)
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é)點(diǎn)是否是元素節(jié)點(diǎn) 也是為了實(shí)現(xiàn)不同瀏覽器之間的兼容性 問 題(1是元素節(jié)點(diǎn) Node.ELEMENT_NODE ---1 -- 元素節(jié)點(diǎn))
if(provinces[i].nodeType==1){
//創(chuàng)建一個option節(jié)點(diǎn)對象
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 "));
//添加省到頁面dom對象中
sheng.appendChild(shengopt);
}
}
//當(dāng)省節(jié)點(diǎn)發(fā)生改變時(shí) 觸發(fā)事件
sheng.onchange=function(){
//獲取省節(jié)點(diǎn)所有的option對象的集合
var shengs=sheng.options;
//獲取選中option對象的selectedIndex(下標(biāo)值)
var num=shengs.selectedIndex;
//清空市 區(qū)
shi.length=0;
xian.length=0;
//根據(jù)選中的省獲取其value值的內(nèi)容 即xml文件中的postcode對應(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)不同瀏覽器之間的兼 容性問題(1是元素節(jié)點(diǎn) Node.ELEMENT_NODE ---1 -- 元素 節(jié)點(diǎn))
if(provinces[i].nodeType==1){
//根據(jù)省獲取其postcode值的內(nèi)容 即html文件中的value對應(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)不同瀏覽 器之間的兼容性問題(1是元素節(jié)點(diǎn) Node.ELEMENT_NODE ---1 -- 元素節(jié)點(diǎn))
if(cities[i].nodeType==1){
//創(chuàng)建一個option節(jié)點(diǎn)對象
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"));
//添加市到頁面dom對象中
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
//當(dāng)市節(jié)點(diǎn)發(fā)生改變時(shí) 觸發(fā)事件
shi.onchange=function(){
//獲取市節(jié)點(diǎn)所有的option對象的集合
var shis=shi.options;
//獲取選中option對象的selectedIndex(下標(biāo)值)
var num=shis.selectedIndex;
//根據(jù)選中的市獲取其value值的內(nèi)容 即xml文件中的postcode對應(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)不同瀏覽器之間的兼 容性問題(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)不同瀏覽器之 間的兼容性問題(1是元素節(jié)點(diǎn) Node.ELEMENT_NODE ---1 -- 元素節(jié)點(diǎn))
if(cities[j].nodeType==1){
//根據(jù)市獲取其postcode值的內(nèi)容 即html文件中的 value對應(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)不 同瀏覽器之間的兼容性問題(1是元素節(jié)點(diǎn) Node.ELEMENT_NODE ---1 -- 元素節(jié)點(diǎn))
if(areas[k].nodeType==1){
//創(chuàng)建一個option節(jié)點(diǎn)對象
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ū)到頁面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程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- javascript讀取Xml文件做一個二級聯(lián)動菜單示例
- JS+XML 省份和城市之間的聯(lián)動實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)的全國省市二級聯(lián)動下拉選擇菜單完整實(shí)例
- PHP+Mysql+Ajax+JS實(shí)現(xiàn)省市區(qū)三級聯(lián)動
- JS制作簡單的三級聯(lián)動
- JS實(shí)多級聯(lián)動下拉菜單類，簡單實(shí)現(xiàn)省市區(qū)聯(lián)動菜單！
- 最好用的省市二級聯(lián)動 原生js實(shí)現(xiàn)你值得擁有
- jquery+json 通用三級聯(lián)動下拉列表
- javascript實(shí)現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
- js使用xml數(shù)據(jù)載體實(shí)現(xiàn)城市省份二級聯(lián)動效果
相關(guān)文章
gameboy網(wǎng)頁闖關(guān)游戲(riddle webgame)--仿微信聊天的前端頁面設(shè)計(jì)和難點(diǎn)
本文講如何在網(wǎng)頁端實(shí)現(xiàn)一個仿微信的聊天窗口界面, 以及其中涉及到的一些技術(shù)點(diǎn). 對gameboy闖關(guān)游戲相關(guān)知識感興趣的朋友參考下2016-02-02
這篇文章主要介紹了詳解webpack模塊化管理和打包工具,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
JavaScript中創(chuàng)建類/對象的幾種方法總結(jié)
這篇文章主要是對JavaScript中創(chuàng)建類/對象的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了ES6 更易于繼承的類語法的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
JavaScript獲取并更改input標(biāo)簽name屬性的方法
這篇文章主要介紹了JavaScript獲取并更改input標(biāo)簽name屬性的方法,涉及javascript針對表單元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07
JS指定音頻audio在某個時(shí)間點(diǎn)進(jìn)行播放
這篇文章主要介紹了JS指定音頻audio在某個時(shí)間點(diǎn)進(jìn)行播放,獲取當(dāng)前音頻audio的長度,音頻時(shí)長格式轉(zhuǎn)化,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)
本篇文章只要是對JavaScript的常見兼容問題及相關(guān)解決方法(chrome/IE/firefox)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
html2canvas屬性和使用方法以及如何使用html2canvas將HTML內(nèi)容寫入Canvas生成圖片
為大家介紹一款JS截圖插件html2canvas.js， 它可以通過純JS對瀏覽器端經(jīng)行截屏,下面就為大家介紹一下html2canvas.js屬性和具體使用方法，并為大家提供了一個實(shí)例2020-01-01
JavaScript和TypeScript中的void的具體使用
這篇文章主要介紹了JavaScript和TypeScript中的void的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
IE8 下的Js錯誤HTML Parsing Error...
今天調(diào)試一段JS代碼出現(xiàn)這個狀況..在火狐 IE7 和IE6下都正常...郁悶,在網(wǎng)上搜索了一下相關(guān)資料 一般錯誤都是指所指定的標(biāo)簽沒有加載完就是用該對象....2009-08-08