您的位置：首页 > Web前端 > JavaScript

JavaScript解析XML实现两级级联下拉列表

2007-10-15 16:27 806 查看
1.创建测试XML文件:select.xml


<?xml version="1.0" encoding="GBK"?>


<select>


<province id="sx">


陕西


<city id="xa">西安</city>


<city id="bj">宝鸡</city>


<city id="ak">安康</city>


</province>


<province id="js">


江苏


<city id="nj">南京</city>


<city id="xz">徐州</city>


</province>


<province id="sh">


上海


</province>


</select>

2.创建HTML页面:select.html


<body>




</body>




<script>...




/**//**


* @description 二级级联下拉


* @author BluesLee


* @lastModif BluesLee


* @createDate 2007-10-13


* @modifDate 2007-10-15


* @version 1.0


*/


SelectLevel.prototype.xml;


SelectLevel.prototype.provinces;


SelectLevel.prototype.parentName="province";//父节点名称


SelectLevel.prototype.childName="city";//子节点名称


SelectLevel.prototype.keyName="id";//属性




/**//**


* 对象SelectLevel的构造器


* @author BluesLee


* @lastModif BluesLee


* @createDate 2007-10-13


* @modifDate 2007-10-15


* @version 1.0


*/




function SelectLevel(parentName,childName,keyName)...{




if(parentName!=null && parentName!="")...{


this.parentName=parentName;


}




if(childName!=null && childName!="")...{


this.childName=childName;


}




if(keyName!=null && keyName!="")...{


this.keyName=keyName;


}


}




/**//**


* 加载xml文件


* @author BluesLee


* @lastModif BluesLee


* @createDate 2007-10-13


* @modifDate 2007-10-15


* @version 1.0


*/




SelectLevel.prototype.readXML=function(url)...{


var selectXML;


//如果它受支持，采用标准的2级DOM技术




if(document.implementation && document.implementation.createDocument)...{


//创建新的Document对象


selectXML=document.implementation.createDocument("","",null);


//设置装载完毕时触发事件




selectXML.onload=function()...{


alert("加载完成");


}


selectXML.load(url);




}else...{//IE浏览器创建Document对象


selectXML=new ActiveXObject("Microsoft.XMLDOM");


//设置onload




selectXML.onreadystatechange=function()...{




if(selectXML.readyState==4)...{


alert("加载完成");


}


}


selectXML.load(url);


}


this.xml=selectXML;


}




/**//**


* 遍历xml


* @author BluesLee


* @lastModif BluesLee


* @createDate 2007-10-13


* @modifDate 2007-10-15


* @version 1.0


*/




SelectLevel.prototype.iteratorXML=function(node,level)...{


var n=node;




if(n==null)...{


n=this.xml.documentElement;


}






if(level==null)...{


level=0;


}




if(n.nodeType==3)...{




for(var i=0;i<level;i++)...{


document.write("-");


}


document.write(n.data.trim()+"<br>");




}else...{




for(var m=n.firstChild;m!=null;m=m.nextSibling)...{


this.iteratorXML(m,level+1);


}


}


}




/**//**


* 下拉联动


* @author BluesLee


* @lastModif BluesLee


* @createDate 2007-10-13


* @modifDate 2007-10-15


* @version 1.0


*/




SelectLevel.prototype.changeSelect=function()...{


var city=document.getElementById(this.childName);


var province=document.getElementById(this.parentName);


city.options.length=0;






if(province.value==null || province.value=="")...{


city.options.length=1;


city.options[0].text="请选择…";


return;


}




var citys=this.provinces[this[province.value]].getElementsByTagName(this.childName);




if(citys.length==0)...{


city.options.length=city.options.length+1;


city.options[city.options.length-1].value=province.value;




for(var i=0;i<province.options.length;i++)...{




if(province.options[i].selected)...{


city.options[city.options.length-1].text=province.options[i].text;


return;


}


}


return;


}


city.options.length=citys.length;




for(var i=0;i<citys.length;i++)...{


city.options[i].value=citys[i].getAttribute(this.keyName);


city.options[i].text=citys[i].firstChild.data.trim();


}


}




/**//**


* 初始化下拉列表


* @author BluesLee


* @lastModif BluesLee


* @createDate 2007-10-13


* @modifDate 2007-10-15


* @version 1.0


*/




SelectLevel.prototype.init=function(parent,province,city)...{


this.provinces=this.xml.getElementsByTagName(this.parentName);


var selectProvince=document.createElement("select");


var selectCity=document.createElement("select");


var obj=this;




selectProvince.setAttribute("name",this.parentName);


selectProvince.setAttribute("id",this.parentName);




selectProvince.attachEvent("onchange",function()...{obj.changeSelect();});


selectProvince.options.length=this.provinces.length+1;


selectProvince.options[0].text="请选择…";




selectCity.setAttribute("name",this.childName);


selectCity.setAttribute("id",this.childName);


selectCity.options.length=1;


selectCity.options[0].text="请选择…";




for(var i=0;i<this.provinces.length;i++)...{


SelectLevel.prototype[this.provinces[i].getAttribute(this.keyName)]=i;


selectProvince.options[i+1].value=this.provinces[i].getAttribute(this.keyName);


selectProvince.options[i+1].text=this.provinces[i].firstChild.data.trim();




if(this.provinces[i].getAttribute(this.keyName)==province)...{


selectProvince.options[i+1].selected=true;


var citys=this.provinces[i].getElementsByTagName(this.childName);


selectCity.options.length=citys.length+1;




for(var j=0;j<citys.length;j++)...{


selectCity.options[j+1].value=citys[j].getAttribute(this.keyName);


selectCity.options[j+1].text=citys[j].firstChild.data.trim();




if(citys[j].getAttribute(this.keyName)==city)...{


selectCity.options[j+1].selected=true;


}


}


}


}


parent.appendChild(selectProvince);


parent.appendChild(selectCity);


}






String.prototype.trim=function()...{


return this.replace(/^s*/g,"").replace(/s*$/g,"");


}


//测试


var newXML=new SelectLevel();


newXML.readXML("select.xml");


//newXML.iteratorXML(null,-2);


newXML.init(document.body,"sx","bj");


</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航