javascript解析xml實作省市縣三級連動的方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

javascript解析xml實作省市縣三級連動的方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:49 PM

javascript xml 三級聯動

本文實例講述了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程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7494

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

能否用PowerPoint開啟XML文件 Feb 19, 2024 pm 09:06 PM

XML檔可以用PPT開啟嗎？ XML，即可擴展標記語言（ExtensibleMarkupLanguage），是一種廣泛應用於資料交換和資料儲存的通用標記語言。與HTML相比，XML更加靈活，能夠定義自己的標籤和資料結構，使得資料的儲存和交換更加方便和統一。而PPT，即PowerPoint，是微軟公司開發的一種用於創建簡報的軟體。它提供了圖文並茂的方

如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

XML 解析的 Java 函式庫比較：尋找最佳解決方案 Mar 09, 2024 am 09:10 AM

簡介XML（可擴展標記語言）是一種用於儲存和傳輸資料的流行格式。在Java中解析XML是許多應用程式的必要任務，從資料交換到文件處理。為了有效地解析XML，開發人員可以使用各種Java函式庫。本文將比較一些最受歡迎的XML解析函式庫，重點放在它們的特性、功能和效能，以幫助開發人員做出明智的選擇。 DOM（文件物件模型）解析函式庫JavaXMLDOMAPI：由oracle提供的標準DOM實作。它提供了一個物件模型，允許開發人員存取和操作XML文件。 DocumentBuilderFactoryfactory=D

See all articles

javascript解析xml實作省市縣三級連動的方法_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題