html页面表单部分
<select name="province" id="province" οnchange="javascript:loadCity();">
<option value="0" selected="selected">请选择</option>
</select>
<select name="city" id="city" οnchange="javascript:outputAll();">
<option value="0" selected="selected">请选择</option>
</select>
<input name="" type="button" class="btn_map_search" οnclick="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>