注意：谷歌浏览器不允许加载本地的xml文件，所以必须放到服务器中，才能看到效果。
<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级省市级联</title>
<script>
//IE中创建xml dom的方法
function createXmlDomIE(){
var arr=["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument","Microsoft.XMLDOM"];
try{
for(var i=0;i<arr.length;i++){
//alert(arr[i]);
return new ActiveXObject(arr[i]);
}
}catch(ex){
throw ex;
}
}
//IE和firefox的xml dom实现有区别
function xmlDom(){
var xmldom;
if(window.ActiveXObject){ //xml文档对象
xmldom=createXmlDomIE();
}else if(document.implementation&&document.implementation.createDocument){
//createDocument(); 第一个是命名空间 第二个参数跟标签名 第三个参数doc类型
xmldom=document.implementation.createDocument("","",null);
}else{
throw new Error("您的浏览器不支持XML DOM");
}
return xmldom;
}
window.οnlοad=function(){
var xmldom;
if(window.DOMParser&&!window.ActiveXObject){ //如果是谷歌浏览器并且不是IE浏览器
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","city.xml",false);
xmlhttp.send(null);
if(xmlhttp.readyState == 4){
xmldom = xmlhttp.responseXML.documentElement;
}
}else{
xmldom=xmlDom();
xmldom.async=false;
xmldom.load("city.xml"); //加载xml文件
}
var sheng=document.getElementById("sheng");
var shi=document.getElementById("shi");
var xian=document.getElementById("xian");
//获取所有的省份
var shengs=xmldom.getElementsByTagName("province");
//将所有的省添加到省的下拉列表中
for(var i=0;i<shengs.length;i++){
addOption(shengs[i],sheng);
}
var cities;
//在sheng的下拉列表上判断一个change事件
sheng.οnchange=function(){
var flag=0;
//获取当前选择的省的索引
var index=sheng.options.selectedIndex;
shi.length=0; //清空市
xian.length=0; //清空县
cities=shengs[index].childNodes; //获取选中的省下的所有市
for(var j=0;j<cities.length;j++){
if(cities[j].nodeType==1){//判断当前节点是否为元素节点
addOption(cities[j],shi); //将当前市添加的市的下拉列表中
if(flag==0){
var areas=cities[j].childNodes; //获取第一个市下的所有县
for(var k=0;k<areas.length;k++){
addOption(areas[k],xian);
}
flag=1;
}
}
}
}
//当市发生改变时
shi.οnchange=function(){
xian.length=0; //清空县
//获取选中的市的code
var mycode=shi.value;
var shis=xmldom.getElementsByTagName("city"); //取出所有市
for(var i=0;i<shis.length;i++){
if(shis[i].nodeType==1){//如果是元素节点
var youcode=shis[i].getAttribute("postcode"); //取出当前市的code
if(mycode==youcode){//如果当前是的code跟我选择的市的code一样
var xians=shis[i].childNodes; //获取当前市的所有县
for(var j=0;j<xians.length;j++){ //循环添加所有县
if(xians[j].nodeType==1){
addOption(xians[j],xian);
}
}
}
}
}
}
}
function addOption(arrs,obj){
if(arrs.nodeType==1){
var opt=document.createElement("option");
opt.appendChild(document.createTextNode(arrs.getAttribute("name")));
opt.setAttribute("value",arrs.getAttribute("postcode"));
obj.appendChild(opt);
}
}
</script>
</head>
<body>
<div>
<select id="sheng" style="width:160px;border:1px solid #F93;"></select>
<select id="shi" style="width:160px;border:1px solid #F93;"></select>
<select id="xian" style="width:160px;border:1px solid #F93;"></select>
</div>
</body>
</html>
扫一扫
2072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
