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

最新推荐文章于 2021-02-12 23:27:17 发布

lip009

最新推荐文章于 2021-02-12 23:27:17 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB开发-JavaScript 文章标签： xml javascript function null encoding url

本文链接：https://blog.youkuaiyun.com/lip009/article/details/1825960

WEB开发-JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用XML存储数据并结合HTML实现动态更新的二级级联下拉菜单的方法。通过JavaScript操作DOM来完成省份与城市数据的加载及联动选择效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建测试XML文件:select.xml

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

陕西

</province>

江苏

</province>

上海

</province>

</select>

2.创建HTML页面:select.html

<body>

</body>

/**

* @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>