ajax无刷新二级联动下拉菜单（修改版）

网上流传的ajax无刷新二级联动下拉菜单(省市联动)演示的修改版，主要功能是通过ajax技术，利用javascript操作xml文件的dom，实现下拉菜单显示。放在服务器端主要有3个文件:演示demo地址：http://222.205.42.210/js/select/selectChange.html

selectChange.html main.js serverDoc.xml

---------------------------------------------------

<!--

selectChange.html

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head>

</head>

<body onload="sendRequest();">
<select name="province" id="province" onchange="javascript:loadCity();">
<option value="0" selected="selected">请选择</option>
</select>

</body>

</html>

-------------------------------------------------------------------------

//main.js

/*
* ajax无刷新二级联动下拉菜单(省市联动)演示js文件
*
* 原author arcow <arcow@126.com>
*修改者:herberthui <herberthuige@163.com>
*/

var http_request=false;
var localPro;
var localCity;
var returnXML;
var returnText;

function initVar()
{
localPro=document.getElementById("province");
localCity=document.getElementById("city");
}

function sendRequest()
{
initVar();
createXMLHttp();
http_request.onreadystatechange = processRequest;
http_request.open("GET","serverDoc.xml", true);
http_request.send(null);
}

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>河东</city><city>西青</city><city>河西</city><city>津南</city><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></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></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></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>镇江</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></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>景德镇</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><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></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><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><city>德阳</city><city>自贡</city><city>攀枝花</city><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><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>嘉峪关</city><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></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>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。