2. 程式人生 > >JS解析XML--實現省市縣級聯

JS解析XML--實現省市縣級聯

阿新 • • 發佈：2019-02-06

JS解析省市區級聯XML檔案

程式碼附上：

//1.開始讀取xml檔案
var xmlDoc = checkXMLDocObj('../js/font/province_data.xml');//讀取到xml檔案中的資料


//2. 首先對xml物件進行判斷
function checkXMLDocObj(xmlFile) {
    var xmlDoc = loadXML(xmlFile);
    if (xmlDoc == null) {
        alert('您的瀏覽器不支援xml檔案讀取,於是本頁面禁止您的操作,推薦使用IE5.0以上可以解決此問題!');
    }
    return
 
 xmlDoc;
}

// 3.載入xml文件
function loadXML(xmlFile) {
    var xmlDoc;
    if (window.ActiveXObject) {
        xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE瀏覽器
        xmlDoc.async = false;
        xmlDoc.load(xmlFile);
    }else if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) { //火狐瀏覽器
    //else if (document.implementation && document.implementation.createDocument) {//這裡主要是對谷歌瀏覽器進行處理
 

        xmlDoc = document.implementation.createDocument('', '', null);
        xmlDoc.async = false;
        xmlDoc.load(xmlFile);
    }else{ //谷歌瀏覽器
        var xmlhttp = new window.XMLHttpRequest();
        xmlhttp.open("GET",xmlFile,false);
        xmlhttp.send(null);
        if(xmlhttp.readyState == 4
 
){
            xmlDoc = xmlhttp.responseXML.documentElement;
        } 
    }
    return xmlDoc;
}

//4.解析Xml檔案內容
//省
if(xmlDoc){

    //IE專用（火狐，谷歌都可以用）
    //省
    var province = xmlDoc.getElementsByTagName("province"),city = "";
    for(var i=0;len=province.length,i<len;i++){
        $("#userCity").append("<option>"+province[i].attributes[0].nodeValue+"</option>")
    }
    //市
    $("#userCity").change(function(){
        for(var i=0;len=province.length,i<len;i++){
            if(province[i].attributes[0].nodeValue == $(this).val()){
                city  = province[i].getElementsByTagName("city");
                for(var j=0;lens=city.length,j<lens;j++){
                    $("#userSell").append("<option>"+city[j].attributes[0].nodeValue+"</option>");
                }
                return;
            }
        }   
    });
    //縣
    $("#userSell").change(function(){
        for(var j=0;lens=city.length,j<lens;j++){
            var userCounty = city[j].getElementsByTagName("district");
            if(city[j].attributes[0].nodeValue == $(this).val()){
                for(var k=0;lenser=userCounty.length,k<lens;k++){
                    $("#userCounty").append("<option>"+userCounty[k].attributes[0].nodeValue+"</option>");
                }
                return;
            }
        }
    });
}

省市（區）縣xml檔案附上：

<?xml version="1.0" encoding="utf-8"?>
<root>
    <province name="安徽省">
        <city name="安慶市">
            <district name="樅陽縣" zipcode="246000" />
            <district name="大觀區" zipcode="246000" />
            <district name="懷寧縣" zipcode="246000" />
            <district name="潛山縣" zipcode="246000" />
            <district name="宿松縣" zipcode="246000" />
            <district name="太湖縣" zipcode="246000" />
            <district name="桐城市" zipcode="246000" />
            <district name="望江縣" zipcode="246000" />
            <district name="宜秀區" zipcode="246000" />
            <district name="迎江區" zipcode="246000" />
            <district name="嶽西縣" zipcode="246000" />
            <district name="其他" zipcode="246000" />
        </city>
        <city name="蚌埠市">
            <district name="蚌山區" zipcode="233000" />
            <district name="固鎮縣" zipcode="233000" />
            <district name="懷遠縣" zipcode="233000" />
            <district name="淮上區" zipcode="233000" />
            <district name="龍子湖區" zipcode="233000" />
            <district name="五河縣" zipcode="233000" />
            <district name="禹會區" zipcode="233000" />
            <district name="其他" zipcode="233000" />
        </city>
        <city name="亳州市">
            <district name="利辛縣" zipcode="236000" />
            <district name="蒙城縣" zipcode="236000" />
            <district name="譙城區" zipcode="236000" />
            <district name="渦陽縣" zipcode="236000" />
            <district name="其他" zipcode="236000" />
        </city>
        <city name="巢湖市">
            <district name="含山縣" zipcode="238000" />
            <district name="和縣" zipcode="238000" />
            <district name="居巢區" zipcode="238000" />
            <district name="廬江縣" zipcode="238000" />
            <district name="無為縣" zipcode="238000" />
            <district name="其他" zipcode="238000" />
        </city>
        <city name="池州市">
            <district name="東至縣" zipcode="247100" />
            <district name="貴池區" zipcode="247100" />
            <district name="青陽縣" zipcode="247100" />
            <district name="石臺縣" zipcode="247100" />
            <district name="其他" zipcode="247100" />
        </city>
        <city name="滁州市">
            <district name="定遠縣" zipcode="239000" />
            <district name="鳳陽縣" zipcode="239000" />
            <district name="來安縣" zipcode="239000" />
            <district name="琅琊區" zipcode="239000" />
            <district name="明光市" zipcode="239000" />
            <district name="南譙區" zipcode="239000" />
            <district name="全椒縣" zipcode="239000" />
            <district name="天長市" zipcode="239000" />
            <district name="其他" zipcode="239000" />
        </city>
        <city name="阜陽市">
            <district name="阜南縣" zipcode="236100" />
            <district name="界首市" zipcode="236100" />
            <district name="臨泉縣" zipcode="236100" />
            <district name="太和縣" zipcode="236100" />
            <district name="潁東區" zipcode="236100" />
            <district name="潁泉區" zipcode="236100" />
            <district name="潁上縣" zipcode="236100" />
            <district name="潁州區" zipcode="236100" />
            <district name="其他" zipcode="236100" />
        </city>
        <city name="合肥市">
            <district name="包河區" zipcode="230000" />
            <district name="長豐縣" zipcode="230000" />
            <district name="肥東縣" zipcode="230000" />
            <district name="肥西縣" zipcode="230000" />
            <district name="廬陽區" zipcode="230000" />
            <district name="蜀山區" zipcode="230000" />
            <district name="瑤海區" zipcode="230000" />
            <district name="其他" zipcode="230000" />
        </city>
        <city name="淮北市">
            <district name="杜集區" zipcode="235000" />
            <district name="烈山區" zipcode="235000" />
            <district name="濉溪縣" zipcode="235000" />
            <district name="相山區" zipcode="235000" />
            <district name="其他" zipcode="235000" />
        </city>
        <city name="淮南市">
            <district name="八公山區" zipcode="232000" />
            <district name="大通區" zipcode="232000" />
            <district name="鳳臺縣" zipcode="232000" />
            <district name="潘集區" zipcode="232000" />
            <district name="田家庵區" zipcode="232000" />
            <district name="謝家集區" zipcode="232000" />
            <district name="其他" zipcode="232000" />
        </city>
        <city name="黃山市">
            <district name="黃山區" zipcode="242700" />
            <district name="徽州區" zipcode="242700" />
            <district name="祁門縣" zipcode="242700" />
            <district name="屯溪區" zipcode="242700" />
            <district name="歙縣" zipcode="242700" />
            <district name="休寧縣" zipcode="242700" />
            <district name="黟縣" zipcode="242700" />
            <district name="其他" zipcode="242700" />
        </city>
        <city name="六安市">
            <district name="霍邱縣" zipcode="237000" />
            <district name="霍山縣" zipcode="237000" />
            <district name="金安區" zipcode="237000" />
            <district name="金寨縣" zipcode="237000" />
            <district name="壽縣" zipcode="237000" />
            <district name="舒城縣" zipcode="237000" />
            <district name="裕安區" zipcode="237000" />
            <district name="其他" zipcode="237000" />
        </city>
        <city name="馬鞍山市">
            <district name="當塗縣" zipcode="243000" />
            <district name="花山區" zipcode="243000" />
            <district name="金家莊區" zipcode="243000" />
            <district name="雨山區" zipcode="243000" />
            <district name="其他" zipcode="243000" />
        </city>
        <city name="宿州市">
            <district name="碭山縣" zipcode="234100" />
            <district name="靈璧縣" zipcode="234100" />
            <district name="泗縣" zipcode="234100" />
            <district name="蕭縣" zipcode="234100" />
            <district name="墉橋區" zipcode="234100" />
            <district name="其他" zipcode="234100" />
        </city>
        <city name="銅陵市">
            <district name="郊區" zipcode="244000" />
            <district name="獅子山區" zipcode="244000" />
            <district name="銅官山區" zipcode="244000" />
            <district name="銅陵縣" zipcode="244000" />
            <district name="其他" zipcode="244000" />
        </city>
        <city name="蕪湖市">
            <district name="繁昌縣" zipcode="241000" />
            <district name="鏡湖區" zipcode="241000" />
            <district name="鳩江區" zipcode="241000" />
            <district name="南陵縣" zipcode="241000" />
            <district name="三山區" zipcode="241000" />
            <district name="蕪湖縣" zipcode="241000" />
            <district name="弋江區" zipcode="241000" />
            <district name="其他" zipcode="241000" />
        </city>
        <city name="宣城市">
            <district name="廣德縣" zipcode="366000" />
            <district name="績溪縣" zipcode="366000" />
            <district name="涇縣" zipcode="366000" />
            <district name="旌德縣" zipcode="366000" />
            <district name="郎溪縣" zipcode="366000" />
            <district name="寧國市" zipcode="366000" />
            <district name="宣州區" zipcode="366000" />
            <district name="其他" zipcode="366000" />
        </city>
    </province>

    <province name="澳門特別行政區">
        <city name="澳門特別行政區">
            <district name="" zipcode="" />
        </city>
    </province>


    <province name="北京市">
        <city name="北京市">
            <district name="昌平區" zipcode="100000" />
            <district name="朝陽區" zipcode="100000" />
            <district name="崇文區" zipcode="100000" />
            <district name="大興區" zipcode="100000" />
            <district name="東城區" zipcode="100000" />
            <district name="房山區" zipcode="100000" />
            <district name="豐臺區" zipcode="100000" />
            <district name="海淀區" zipcode="100000" />
            <district name="懷柔區" zipcode="100000" />
            <district name="門頭溝區" zipcode="100000" />
            <district name="密雲縣" zipcode="100000" />
            <district name="平谷區" zipcode="100000" />
            <district name="石景山區" zipcode="100000" />
            <district name="順義區" zipcode="100000" />
            <district name="通州區" zipcode="100000" />
            <district name="西城區" zipcode="100000" />
            <district name="宣武區" zipcode="100000" />
            <district name="延慶縣" zipcode="100000" />
            <district name="其他" zipcode="100000" />
        </city>
    </province>
    <province name="福建省">
        <city name="福州市">
            <district name="倉山區" zipcode="350000" />
            <district name="長樂市" zipcode="350000" />
            <district name="福清市" zipcode="350000" />
            <district name="鼓樓區" zipcode="350000" />
            <district name="晉安區" zipcode="350000" />
            <district name="連江縣" zipcode="350000" />
            <district name="羅源縣" zipcode="350000" />
            <district name="馬尾區" zipcode="350000" />
            <district name="閩侯縣" zipcode="350000" />
            <district name="閩清縣" zipcode="350000" />
            <district name="平潭縣" zipcode="350000" />
            <district name="臺江區" zipcode="350000" />
            <district name="永泰縣" zipcode="350000" />
            <district name="其他" zipcode="350000" />
        </city>
        <city name="龍巖市">
            <district name="長汀縣" zipcode="364000" />
            <district name="連城縣" zipcode="364000" />
            <district name="上杭縣" zipcode="364000" />
            <district name="武平縣" zipcode="364000" />
            <district name="新羅區" zipcode="364000" />
            <district name="永定縣" zipcode="364000" />
            <district name="漳平市" zipcode="364000" />
            <district name="其他" zipcode="364000" />
        </city>
        <city name="南平市">
            <district name="光澤縣" zipcode="353000" />
            <district name="建甌市" zipcode="353000" />
            <district name="建陽市" zipcode="353000" />
            <district name="浦城縣" zipcode="353000" />
            <district name="邵武市" zipcode="353000" />
            <district name="順昌縣" zipcode="353000" />
            <district name="松溪縣" zipcode="353000" />
            <district name="武夷山市" zipcode="353000" />
            <district name="延平區" zipcode="353000" />
            <district name="政和縣" zipcode="353000" />
            <district name="其他" zipcode="353000" />
        </city>
        <city name="寧德市">
            <district name="福安市" zipcode="352100" />
            <district name="福鼎市" zipcode="352100" />
            <district name="古田縣" zipcode="352100" />
            <district name="蕉城區" zipcode="352100" />
            <district name="屏南縣" zipcode="352100" />
            <district name="壽寧縣" zipcode="352100" />
            <district name="霞浦縣" zipcode="352100" />
            <district name="柘榮縣" zipcode="352100" />
            <district name="周寧縣" zipcode="352100" />
            <district name="其他" zipcode="352100" />
        </city>
        <city name="莆田市">
            <district name="城廂區" zipcode="362000" />
            <district name="涵江區" zipcode="362000" />
            <district name="荔城區" zipcode="362000" />
            <district name="仙遊縣" zipcode="362000" />
            <district name="秀嶼區" zipcode="362000" />
            <district name="其他" zipcode="362000" />
        </city>
        <city name="泉州市">
            <district name="安溪縣" zipcode="362000" />
            <district name="德化縣" zipcode="362000" />
            <district name="豐澤區" zipcode="362000" />
            <district name="惠安縣" zipcode="362000" />
            <district name="晉江市" zipcode="362000" />
            <district name="鯉城區" zipcode="362000" />
            <district  
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
JS解析XML--實現省市縣級聯

     
 
							
							
							JS解析省市區級聯XML檔案

程式碼附上：



//1.開始讀取xml檔案
var xmlDoc = checkXMLDocObj('../js/font/province_data.xml');//讀取到xml檔案中的資料


//2. 首先對xml物件進 



  
 

    


    
    
用js解析xml實現省市二級聯動

     
 
                
html頁面表單部分
   <select name="province" id="province" onchange="javascript:loadCity();">
            <option value="0" selected="s 



  
 

    


    
    
JQuery 載入並解析 XML實現省市聯動

     
 

            /*
             * jquery通過$.get()或者$.post()方法來解析並載入xml檔案
             * 
             *  * 以$.get(url,callback)方法為例
             *      * url 



  
 

    


    
    
利用ajax實現省市縣級聯選擇

     
 
							
							
							利用ajax和javascript實現地址選擇級聯。



效果： 






index.html：

<!DOCTYPE html>
<html>

    <head>
        <meta charset 



  
 

    


    
    
javascript實現的省市縣級聯選單

     
  
 
  <script type="text/javascript">  var array = new Array();  array['黑龍江']=['哈爾濱市','齊齊哈爾市','雞西市','鶴崗市'];  array['陝西']=['西安','咸陽','渭 



  
 

    


    
    
解決Js解析xml瀏覽器不相容問題及省市區三級聯動實現

     
 
<root name="中國">
 <province name="請選擇省" postcode="100000" >
    <city name="請選擇市" postcode="100100" >
	  <area name="請選擇區" postcode=" 



  
 

    


    
    
jq 省市縣級聯

     
  
 
 <!doctype html> <html lang="en">  <head>   <meta name="Generator" content="EditPlus?">   <meta name="Author" 



  
 

    


    
    
js解析xml網頁地址

     
 IP地址如圖所示： 
 
  
$(function(){ var ipstr = { currentPage:"1", pageSize:"20", ryid:"10000001300317"  };  $.ajax({  url: "http://xxx.xxx.xxx.xx:5050/bpm_ 



  
 

    


    
    
分別使用js和JQuery實現省市二級聯動

     
  
 
 1.1html 
 js中this指的是當前操作的物件 
 <tr>
							<td>籍貫</td>
							<td><select onchange="changeCity(this.value)" id="province" &g 



  
 

    


    
    
Java之DOM4J解析XML 實現 XML檔案資料的增刪改查方法

     
 
                下面是我的Persons.xml檔案資料

<?xml version="1.0" encoding="utf-8"?>
<persons>
	<person id="0">
		<name>翠花</name>
		 



  
 

    


    
    
ext省市縣級聯下拉

     
 
								
								            
						
                
做了個省市縣級聯下拉






/**
 * Created by Sukla on 2017/7/28.
 */
Ext.define('app.view.common.ssx.Ssx', {
  



  
 

    


    
    
js 解析xml檔案和xml字串

     
 
                
js解析xml檔案

<script type='text/javascript'>
    loadXML = function(xmlFile){
        var xmlDoc=null;
        //判斷瀏覽器的型別
        //支 



  
 

    


    
    
使用XPath解析xml實現簡單的Spring IOC完成bean的依賴注入

     
 
                
幾天使用Xpath解析xml檔案，例項化bean，完成spring IOC bean的依賴注入的簡單實現。
假設用如下格式的bean檔案：
<?xml version="1.0" encoding="UTF-8"?>
<beans>
	
	<b 



  
 

    


    
    
XML：使用DOM技術解析xML檔案中的城市，實現select級聯選擇

     
 
<?xml version="1.0" encoding="utf-8"?>
<china>

    <province name="北京">
        <city>東城區</city>
        <city> 



  
 

    


    
    
[HTML]js讀取XML文件並解析

     
 sim   test   inner   document   back   ner   sof   child   1.0   xml文件：test.xml

<?xml version="1.0"?>  
  
<note>  
<to>George</to> 



  
 

    


    
    
JS加載&解析XML文件，瀏覽器兼容

     
 enc   dom   eat   min   test   ldo   dex   new   eval   #  JS加載XML，瀏覽器之間有差異，代碼如下

    this.createXMLDom = function() {
        var xmldoc;
        var xmlF 



  
 

    


    
    
JQuery實現AJAX異步請求實現省市聯動（數據傳輸格式為xml）

     
 集合   .html   省市聯動   utf   func   app   字符串   tco   name   AJAX的響應的數據格式：
　　文本，一段HTML的數據，XML，JSON。
使用工具生成xml的文件：
　　通常使用XStream工具，將集合，數組，對象轉化成XML格式。
　　　　步驟一：導 



  
 

    


    
    
vue.js響應式原理解析與實現

     
 github   遞歸   val   實現   mode   最新   中比   ava   新頁面   從很久之前就已經接觸過了angularjs了，當時就已經了解到，angularjs是通過臟檢查來實現數據監測以及頁面更新渲染。之後，再接觸了vue.js，當時也一度很好奇vue.js是如何監測數據更新並 



  
 

    


    
    
vue.js響應式原理解析與實現—實現v-model與{{}}指令

     
 只需要   spl   foreach   形式   pen   for   元素節點   目標   @param   離線瀏覽器軟件    服務器遠程連接
1、可多站同時下載、多站同時扒
2、可單頁扒
3、可自定義， 重寫JS\圖片\CSS路徑
4、執行全站下載後，會下載到本程序根目錄下的html文件夾下。 



  
 

    


    
    
jquery實現省市聯動的兩種方式（xml，，，json）

     
 
							
							
							省市聯動，xml傳值方式



匯入相應的jar

建立表單



<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
&