用js解析xml實現省市二級聯動
html頁面表單部分
<select name="province" id="province" onchange="javascript:loadCity();">
<option value="0" selected="selected">請選擇</option>
</select>
<select name="city" id="city" onchange="javascript:outputAll();">
<option value="0" selected="selected">請選擇</option>
</select>
<input name="" type="button" class="btn_map_search" onclick="find_network()" />
<div id="statusTxt"></div>
js指令碼頁（用ajax實現讀取xml資料）
// JavaScript Document
var http_request=false;
var localPro;
var localCity;
var returnXML;
var returnText;
function initVar()
{
localPro=document.getElementById("province");
localCity=document.getElementById("city");
}
function createXMLHttp()
{
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//設定MiME類別
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
function sendRequest()
{
initVar();
createXMLHttp();
http_request.onreadystatechange = processRequest;
http_request.open("GET","../xml/city.xml", true);
http_request.send(null);
}
function processRequest()
{
if (http_request.readyState == 4) { // 判斷物件狀態
if (http_request.status == 200) { // 資訊已經成功返回，開始處理資訊
document.getElementById("statusTxt").innerHTML="";
setProvince();
} else { //頁面不正常
alert("您所請求的頁面有異常。");
}
}else {//只要未讀取完成
document.getElementById("statusTxt").innerHTML="正則讀取資料中……";
}
}
function setProvince()
{
returnText=http_request.responseText;
returnXML=http_request.responseXML;
var pro=returnXML.getElementsByTagName("title");
var citys=returnXML.getElementsByTagName("item");
var cityNodes=citys[0].getElementsByTagName("city");
enterValue(pro,localPro);
enterValue(cityNodes,localCity);
outputAll();
}
function loadCity()
{
var index=localPro.selectedIndex;
var cityNode=returnXML.getElementsByTagName("item");
var curCity=cityNode[index];
var cityNodes=curCity.getElementsByTagName("city");
enterValue(cityNodes,localCity);
outputAll();
}
function enterValue(cell,place)
{
clearPreValue(place);
for(i=0;i<cell.length;i++){
var obj= document.createElement("option");
var doc=document.createTextNode(cell[i].firstChild.nodeValue);
obj.appendChild(doc);
place.appendChild(obj);
}
}
function clearPreValue(pc)
{
while(pc.hasChildNodes())
pc.removeChild(pc.childNodes[0]);
}
function outputAll ()
{
var cellValue= localPro.options[localPro.selectedIndex].firstChild.nodeValue+localCity.options[localCity.selectedIndex].firstChild.nodeValue;
}
xml檔案
<?xml version="1.0" encoding="utf-8"?>
<china>
<province>
<title>請選擇</title>
<item>
<city>請選擇</city>
</item>
</province>
<province>
<title>北京</title>
<item>
<city>請選擇</city>
<city>東城</city>
<city>西城</city>
<city>崇文</city>
<city>宣武</city>
<city>朝陽</city>
<city>豐臺</city>
<city>石景山</city>
<city>海淀</city>
<city>門頭溝</city>
<city>房山</city>
<city>通州</city>
<city>順義</city>
<city>昌平</city>
<city>大興</city>
<city>平谷</city>
<city>懷柔</city>
<city>密雲</city>
<city>延慶</city>
</item>
</province>
<province>
<title>上海</title>
<item>
<city>請選擇</city>
<city>黃浦</city>
<city>盧灣</city>
<city>徐匯</city>
<city>長寧</city>
<city>靜安</city>
<city>普陀</city>
<city>閘北</city>
<city>虹口</city>
<city>楊浦</city>
<city>閔行</city>
<city>寶山</city>
<city>嘉定</city>
<city>浦東</city>
<city>金山</city>
<city>松江</city>
<city>青浦</city>
<city>南匯</city>
<city>奉賢</city>
<city>崇明</city>
</item>
</province>
<province>
<title>天津</title>
<item>
<city>請選擇</city>
<city>和平</city>
<city>東麗</city>
<city>河東</city>
<city>西青</city>
<city>河西</city>
<city>津南</city>
<city>南開</city>
<city>北辰</city>
<city>河北</city>
<city>武清</city>
<city>紅撟</city>
<city>塘沽</city>
<city>漢沽</city>
<city>大港</city>
<city>寧河</city>
<city>靜海</city>
<city>寶坻</city>
<city>薊縣</city>
</item>
</province>
<province>
<title>重慶</title>
<item>
<city>請選擇</city>
<city>萬州</city>
<city>涪陵</city>
<city>渝中</city>
<city>大渡口</city>
<city>江北</city>
<city>沙坪壩</city>
<city>九龍坡</city>
<city>南岸</city>
<city>北碚</city>
<city>萬盛</city>
<city>雙撟</city>
<city>渝北</city>
<city>巴南</city>
<city>黔江</city>
<city>長壽</city>
<city>綦江</city>
<city>潼南</city>
<city>銅梁</city>
<city>大足</city>
<city>榮昌</city>
<city>壁山</city>
<city>梁平</city>
<city>城口</city>
<city>豐都</city>
<city>墊江</city>
<city>武隆</city>
<city>忠縣</city>
<city>開縣</city>
<city>雲陽</city>
<city>奉節</city>
<city>巫山</city>
<city>巫溪</city>
<city>石柱</city>
<city>秀山</city>
<city>酉陽</city>
<city>彭水</city>
<city>江津</city>
<city>合川</city>
<city>永川</city>
<city>南川</city>
</item>
</province>
<province>
<title>河北</title>
<item>
<city>請選擇</city>
<city>石家莊</city>
<city>邯鄲</city>
<city>邢臺</city>
<city>保定</city>
<city>張家口</city>
<city>承德</city>
<city>廊坊</city>
<city>唐山</city>
<city>秦皇島</city>
<city>滄州</city>
<city>衡水</city>
</item>
</province>
<province>
<title>山西</title>
<item>
<city>請選擇</city>
<city>太原</city>
<city>大同</city>
<city>陽泉</city>
<city>長治</city>
<city>晉城</city>
<city>朔州</city>
<city>呂梁</city>
<city>忻州</city>
<city>晉中</city>
<city>臨汾</city>
<city>運城</city>
</item>
</province>
<province>
<title>內蒙古</title>
<item>
<city>請選擇</city>
<city>呼和浩特</city>
<city>包頭</city>
<city>烏海</city>
<city>赤峰</city>
<city>呼倫貝爾盟</city>
<city>阿拉善盟</city>
<city>哲裡木盟</city>
<city>興安盟</city>
<city>烏蘭察布盟</city>
<city>錫林郭勒盟</city>
<city>巴彥淖爾盟</city>
<city>鄂市</city>
</item>
</province>
<province>
<title>遼寧</title>
<item>
<city>請選擇</city>
<city>瀋陽</city>
<city>大連</city>
<city>鞍山</city>
<city>撫順</city>
<city>本溪</city>
<city>丹東</city>
<city>錦州</city>
<city>營口</city>
<city>阜新</city>
<city>遼陽</city>
<city>盤錦</city>
<city>鐵嶺</city>
<city>朝陽</city>
<city>葫蘆島</city>
</item>
</province>
<province>
<title>吉林</title>
<item>
<city>請選擇</city>
<city>長春</city>
<city>吉林</city>
<city>四平</city>
<city>遼源</city>
<city>通化</city>
<city>白山</city>
<city>松原</city>
<city>白城</city>
<city>延邊</city>
</item>
</province>
<province>
<title>黑龍江</title>
<item>
<city>請選擇</city>
<city>哈爾濱</city>
<city>齊齊哈爾</city>
<city>牡丹江</city>
<city>佳木斯</city>
<city>大慶</city>
<city>綏化</city>
<city>鶴崗</city>
<city>雞西</city>
<city>黑河</city>
<city>雙鴨山</city>
<city>伊春</city>
<city>七臺河</city>
<city>大興安嶺</city>
</item>
</province>
<province>
<title>江蘇</title>
<item>
<city>請選擇</city>
<city>南京</city>
<city>鎮江</city>
<city>蘇州</city>
<city>南通</city>
<city>揚州</city>
<city>鹽城</city>
<city>徐州</city>
<city>連雲港</city>
<city>常州</city>
<city>無錫</city>
<city>宿遷</city>
<city>泰州</city>
<city>淮安</city>
</item>
</province>
<province>
<title>浙江</title>
<item>
<city>請選擇</city>
<city>杭州</city>
<city>寧波</city>
<city>溫州</city>
<city>嘉興</city>
<city>湖州</city>
<city>紹興</city>
<city>金華</city>
<city>衢州</city>
<city>舟山</city>
<city>台州</city>
<city>麗水</city>
</item>
</province>
<province>
<title>安徽</title>
<item>
<city>請選擇</city>
<city>合肥</city>
<city>蕪湖</city>
<city>蚌埠</city>
<city>馬鞍山</city>
<city>淮北</city>
<city>銅陵</city>
<city>安慶</city>
<city>黃山</city>
<city>滁州</city>
<city>宿州</city>
<city>池州</city>
<city>淮南</city>
<city>巢湖</city>
<city>阜陽</city>
<city>六安</city>
<city>宣城</city>
<city>亳州</city>
</item>
</province>
<province>
<title>福建</title>
<item>
<city>請選擇</city>
<city>福州</city>
<city>廈門</city>
<city>莆田</city>
<city>三明</city>
<city>泉州</city>
<city>漳州</city>
<city>南平</city>
<city>龍巖</city>
<city>寧德</city>
</item>
</province>
<province>
<title>江西</title>
<item>
<city>請選擇</city>
<city>南昌市</city>
<city>景德鎮</city>
<city>九江</city>
<city>鷹潭</city>
<city>萍鄉</city>
<city>新餘</city>
<city>贛州</city>
<city>吉安</city>
<city>宜春</city>
<city>撫州</city>
<city>上饒</city>
</item>
</province>
<province>
<title>山東</title>
<item>
<city>請選擇</city>
<city>濟南</city>
<city>青島</city>
<city>淄博</city>
<city>棗莊</city>
<city>東營</city>
<city>煙臺</city>
<city>濰坊</city>
<city>濟寧</city>
<city>泰安</city>
<city>威海</city>
<city>日照</city>
<city>萊蕪</city>
<city>臨沂</city>
<city>德州</city>
<city>聊城</city>
<city>濱州</city>
<city>菏澤</city>
</item>
</province>
<province>
<title>河南</title>
<item>
<city>請選擇</city>
<city>鄭州</city>
<city>開封</city>
<city>洛陽</city>
<city>平頂山</city>
<city>安陽</city>
<city>鶴壁</city>
<city>新鄉</city>
<city>焦作</city>
<city>濮陽</city>
<city>許昌</city>
<city>漯河</city>
<city>三門峽</city>
<city>南陽</city>
<city>商丘</city>
<city>信陽</city>
<city>周口</city>
<city>駐馬店</city>
<city>濟源</city>
</item>
</province>
<province>
<title>湖北</title>
<item>
<city>請選擇</city>
<city>武漢</city>
<city>鄂州</city>
<city>宜昌</city>
<city>荊州</city>
<city>襄樊</city>
<city>黃石</city>
<city>荊門</city>
<city>黃岡</city>
<city>十堰</city>
<city>恩施</city>
<city>潛江</city>
<city>天門</city>
<city>仙桃</city>
<city>隨州</city>
<city>咸寧</city>
<city>孝感</city>
</item>
</province>
<province>
<title>湖南</title>
<item>
<city>請選擇</city>
<city>長沙</city>
<city>常德</city>
<city>株洲</city>
<city>湘潭</city>
<city>衡陽</city>
<city>岳陽</city>
<city>邵陽</city>
<city>益陽</city>
<city>婁底</city>
<city>懷化</city>
<city>郴州</city>
<city>永州</city>
<city>湘西</city>
<city>張家界</city>
</item>
</province>
<province>
<title>廣東</title>
<item>
<city>請選擇</city>
<city>廣州</city>
<city>深圳</city>
<city>珠海</city>
<city>汕頭</city>
<city>東莞</city>
<city>中山</city>
<city>佛山</city>
<city>韶關</city>
<city>江門</city>
<city>湛江</city>
<city>茂名</city>
<city>肇慶</city>
<city>惠州</city>
<city>梅州</city>
<city>汕尾</city>
<city>河源</city>
<city>陽江</city>
<city>清遠</city>
<city>潮州</city>
<city>揭陽</city>
<city>雲浮</city>
</item>
</province>
<province>
<title>廣西</title>
<item>
<city>請選擇</city>
<city>南寧</city>
<city>柳州</city>
<city>桂林</city>
<city>梧州</city>
<city>北海</city>
<city>防城港</city>
<city>欽州</city>
<city>貴港</city>
<city>玉林</city>
<city>南寧地區</city>
<city>柳州地區</city>
<city>賀州</city>
<city>百色</city>
<city>河池</city>
</item>
</province>
<province>
<title>海南</title>
<item>
<city>請選擇</city>
<city>海口</city>
<city>三亞</city>
</item>
</province>
<province>
<title>四川</title>
<item>
<city>請選擇</city>
<city>成都</city>
<city>綿陽</city>
<city>德陽</city>
<city>自貢</city>
<city>攀枝花</city>
<city>廣元</city>
<city>內江</city>
<city>樂山</city>
<city>南充</city>
<city>宜賓</city>
<city>廣安</city>
<city>達川</city>
<city>雅安</city>
<city>眉山</city>
<city>甘孜</city>
<city>涼山</city>
<city>瀘州</city>
</item>
</province>
<province>
<title>貴州</title>
<item>
<city>請選擇</city>
<city>貴陽</city>
<city>六盤水</city>
<city>遵義</city>
<city>安順</city>
<city>銅仁</city>
<city>黔西南</city>
<city>畢節</city>
<city>黔東南</city>
<city>黔南</city>
</item>
</province>
<province>
<title>雲南</title>
<item>
<city>請選擇</city>
<city>昆明</city>
<city>大理</city>
<city>曲靖</city>
<city>玉溪</city>
<city>昭通</city>
<city>楚雄</city>
<city>紅河</city>
<city>文山</city>
<city>思茅</city>
<city>西雙版納</city>
<city>保山</city>
<city>德巨集</city>
<city>麗江</city>
<city>怒江</city>
<city>迪慶</city>
<city>臨滄</city>
</item>
</province>
<province>
<title>西藏</title>
<item>
<city>請選擇</city>
<city>拉薩</city>
<city>日喀則</city>
<city>山南</city>
<city>林芝</city>
<city>昌都</city>
<city>阿里</city>
<city>那曲</city>
</item>
</province>
<province>
<title>陝西</title>
<item>
<city>請選擇</city>
<city>西安</city>
<city>寶雞</city>
<city>咸陽</city>
<city>銅川</city>
<city>渭南</city>
<city>延安</city>
<city>榆林</city>
<city>漢中</city>
<city>安康</city>
<city>商洛</city>
</item>
</province>
<province>
<title>甘肅</title>
<item>
<city>請選擇</city>
<city>蘭州</city>
<city>嘉峪關</city>
<city>金昌</city>
<city>白銀</city>
<city>天水</city>
<city>酒泉</city>
<city>張掖</city>
<city>武威</city>
<city>定西</city>
<city>隴南</city>
<city>平涼</city>
<city>慶陽</city>
<city>臨夏</city>
<city>甘南</city>
</item>
</province>
<province>
<title>寧夏</title>
<item>
<city>請選擇</city>
<city>銀川</city>
<city>石嘴山</city>
<city>吳忠</city>
<city>固原</city>
</item>
</province>
<province>
<title>青海</title>
<item>
<city>請選擇</city>
<city>西寧</city>
<city>海東</city>
<city>海南</city>
<city>海北</city>
<city>黃南</city>
<city>玉樹</city>
<city>果洛</city>
<city>海西</city>
</item>
</province>
<province>
<title>新疆</title>
<item>
<city>請選擇</city>
<city>烏魯木齊</city>
<city>石河子</city>
<city>克拉瑪依</city>
<city>伊犁</city>
<city>巴音郭勒</city>
<city>昌吉</city>
<city>克孜勒蘇柯爾克孜</city>
<city>博爾塔拉</city>
<city>吐魯番</city>
<city>哈密</city>
<city>喀什</city>
<city>和田</city>
<city>阿克蘇</city>
</item>
</province>
<province>
<title>香港</title>
<item>
<city>請選擇</city>
<city>香港</city>
</item>
</province>
<province>
<title>澳門</title>
<item>
<city>請選擇</city>
<city>澳門</city>
</item>
</province>
<province>
<title>臺灣</title>
<item>
<city>請選擇</city>
<city>臺北</city>
<city>高雄</city>
<city>臺中</city>
<city>臺南</city>
<city>屏東</city>
<city>南投</city>
<city>雲林</city>
<city>新竹</city>
<city>彰化</city>
<city>苗栗</city>
<city>嘉義</city>
<city>花蓮</city>
<city>桃園</city>
<city>宜蘭</city>
<city>基隆</city>
<city>臺東</city>
<city>金門</city>
<city>馬祖</city>
<city>澎湖</city>
</item>
</province>
<province>
<title>其它</title>
<item>
<city>請選擇</city>
<city>北美洲</city>
<city>南美洲</city>
<city>亞洲</city>
<city>非洲</city>
<city>歐洲</city>
<city>大洋洲</city>
</item>
</province>
</china>
相關推薦
用js解析xml實現省市二級聯動
html頁面表單部分 <select name="province" id="province" onchange="javascript:loadCity();"> <option value="0" selected="s
分別使用js和JQuery實現省市二級聯動
1.1html js中this指的是當前操作的物件 <tr> <td>籍貫</td> <td><select onchange="changeCity(this.value)" id="province" &g
JS解析XML--實現省市縣級聯
JS解析省市區級聯XML檔案 程式碼附上： //1.開始讀取xml檔案 var xmlDoc = checkXMLDocObj('../js/font/province_data.xml');//讀取到xml檔案中的資料 //2. 首先對xml物件進
用JS實現省市二級聯動
一、需求分析我們希望在註冊頁面中新增一個欄位(籍貫)，當用戶選擇一個具體的省份，在後面的下拉列表中動態載入該省份下所有的城市。顯示的效果如下：二、技術分析使用事件(onchange)使用一個二維陣列來儲存省份和城市獲取使用者選擇的省份(使用方法傳參的方式：this.value
Ajax,js實現省市二級聯動
Ajax，js實現省市二級聯動 這裡不羅嗦，直接放圖，分析。 如圖實現效果。如下： 前端程式碼分析： 後端程式碼，相當簡單，只需要查詢資料庫，省份放一個list集合，城市放一個list集合，回寫響應給前端。 前端通過迴圈，一一獲取。 response.setContentType(“
原生js實現省市二級聯動
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊頁面重新佈局</title> <style type="text/css
JQuery 載入並解析 XML實現省市聯動
/* * jquery通過$.get()或者$.post()方法來解析並載入xml檔案 * * * 以$.get(url,callback)方法為例 * * url
很簡單的html+js實現省市二級聯動
var arr = [ ["黃石", "大冶", "黃岡", "武漢", "荊州", "鄂州", "咸寧"], ["長沙", "株洲", "韶關", "湘潭"], ["鄭州", "駐馬店"
jquery ajax實現省市二級聯動
今天給大家帶來使用jQuery ajax實現的省市聯動效果。我們直奔主題，先說下實現思路： 準備資料 這裡資料庫我使用的是mysql，先看下錶格： provience表 city表 這裡使用provience表的主鍵作為city表的外來鍵，
vue學習之mintui picker選擇器實現省市二級聯動
程式碼如下： <!-- 頁面模版 --> <template> <div> <!--header--> <com-header :title="headerData.title" :toLi
JQuery EasyUI Combobox 實現省市二級聯動選單
//編輯修改或新增頁面聯動可以這樣寫 jQuery(function(){ // 省級 $('#province').combobox({ valueField:'itemvalue', //值欄位 textField:'itemtex
解決Js解析xml瀏覽器不相容問題及省市區三級聯動實現
<root name="中國"> <province name="請選擇省" postcode="100000" > <city name="請選擇市" postcode="100100" > <area name="請選擇區" postcode="
JS-省市二級聯動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
Js省市二級聯動
一、javascript 採用二維陣列的方式做了個簡單的省市級二級聯動 <!DOCTYPE html> <html lang="en"> <head> &
js 省市二級聯動選單thinkphp mysql js
參考http://blog.csdn.net/wmsjlihuan/article/details/20700763 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww
html+js省市二級聯動（推薦）
1、html+js部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>二級聯動</title> </hea
android省市二級聯動的實現
因為工作的關係，需要做一個省市二級聯動。 1、首先，實現這個功能所用到的控制元件是android 的spinner 2、要做一個省市二級聯動，首先我們要有所有省及其主要城市的資料，這裡我給一個我的百度雲的連結。大家可以自行前去下載 3、下面是我對該資料
省市二級聯動基礎數據
蘇州 牡丹江 二級 廣元 十堰 石家莊 湖北 ++ htm /* * @Param z:String select標簽的data-province屬性值 * @Param c:String select標簽的 data-city屬性值 * */ windo
25.用js和jquery實現下拉列表的左右選擇
select2 hit color nts -type utf ctype block 標簽 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x
微信小程序picker組件 - 省市二級聯動
內江 新鄉 當前 桂林 AI object HA i++ 貝爾 微信小程序picker組件自帶省市區選擇器，但是業務需求需要省市選擇器，參考官方demo自己寫了一個省市選擇器 wxml文件 <view class="section"> <view c