網(wǎng)上流傳的ajax無刷新二級聯(lián)動下拉菜單(省市聯(lián)動)演示的修改版,，主要功能是通過ajax技術(shù)，利用javascript操作xml文件的dom，實(shí)現(xiàn)下拉菜單顯示,。放在服務(wù)器端主要有3個文件:演示demo地址：http://222.205.42.210/js/select/selectChange.html
selectChange.html main.js serverDoc.xml
---------------------------------------------------
<!--
selectChange.html
-->
<!--
* ajax無刷新二級聯(lián)動下拉菜單(省市聯(lián)動)演示主文件
*
* 原author arcow <[email protected]>
*修改者:herberthui <[email protected]>
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www./1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title> demo </title>
<script language="JavaScript" type="text/javascript" src="main.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body onload="sendRequest();">
<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 type="text" name="district" id="district" readonly="" />
<div id="statusTxt"></div>
</body>
</html>
-------------------------------------------------------------------------
//main.js
/*
* ajax無刷新二級聯(lián)動下拉菜單(省市聯(lián)動)演示js文件
*
* 原author arcow <[email protected]>
*修改者:herberthui <[email protected]>
*/
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) {//設(shè)置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","serverDoc.xml", true);
http_request.send(null);
}
function processRequest()
{
if (http_request.readyState == 4) { // 判斷對象狀態(tài)
if (http_request.status == 200) { // 信息已經(jīng)成功返回，開始處理信息
document.getElementById("statusTxt").innerHTML="";
setProvince();
} else { //頁面不正常
alert("您所請求的頁面有異常,。");
}
}else {//只要未讀取完成
document.getElementById("statusTxt").innerHTML="正則讀取數(shù)據(jù)中……";
}
}
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;
document.getElementById("district").value=cellValue;
}
---------------------------------------------------------------------
//serverDoc.xml
<?xml version="1.0" encoding="GBK"?><china>
<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>河?xùn)|</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>奉節(jié)</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></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>運(yùn)城</city></item></province><province><title>內(nèi)蒙古</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></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></item></province><province><title>江蘇</title><item><city>南京</city><city>鎮(zhèn)江</city><city>蘇州</city><city>南通</city><city>揚(yáng)州</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></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></item></province><province><title>江西</title><item><city>南昌市</city><city>景德鎮(zhèn)</city><city>九江</city><city>鷹潭</city><city>萍鄉(xiāng)</city><city>新馀</city><city>贛州</city><city>吉安</city><city>宜春</city><city>撫州</city><city>上饒</city></item></province><province><title>山東</title><item><city>濟(jì)南</city><city>青島</city><city>淄博</city><city>棗莊</city><city>東營</city><city>煙臺</city><city>濰坊</city><city>濟(jì)寧</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>新鄉(xiāng)</city><city>焦作</city><city>濮陽</city><city>許昌</city><city>漯河</city><city>三門峽</city><city>南陽</city><city>商丘</city><city>信陽</city><city>周口</city><city>駐馬店</city><city>濟(jì)源</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></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>韶關(guān)</city><city>江門</city><city>湛江</city><city>茂名</city><city>肇慶</city><city>惠州</city><city>梅州</city><city>汕尾</city><city>河源</city><city>陽江</city><city>清遠(yuǎn)</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>南寧地區(qū)</city><city>柳州地區(qū)</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><city>德陽</city><city>自貢</city><city>攀枝花</city><city>廣元</city><city>內(nèi)江</city><city>樂山</city><city>南充</city><city>宜賓</city><city>廣安</city><city>達(dá)川</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>畢節(jié)</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></item></province><province><title>西藏</title><item><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>嘉峪關(guān)</city><city>金昌</city><city>白銀</city><city>天水</city><city>酒泉</city><city>張掖</city><city>武威</city><city>定西</city><city>隴南</city><city>平?jīng)?lt;/city><city>慶陽</city><city>臨夏</city><city>甘南</city></item></province><province><title>寧夏</title><item><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><city>和田</city><city>阿克蘇</city></item></province><province><title>香港</title><item><city>香港</city></item></province><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></item></province></china>
