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

最新推荐文章于 2015-08-27 15:03:04 发布

原创最新推荐文章于 2015-08-27 15:03:04 发布 · 4.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#xml #javascript #function #null #iterator #delete

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

7 篇文章

订阅专栏

本文介绍了一种使用XML和JavaScript实现动态级联下拉菜单的方法。通过自定义的BlueParseXML类解析XML文件，BlueCasadedSelect类生成级联下拉框，实现了根据上一级选择动态更新下一级内容的功能。

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

1.创建XML文档:cascaded_select.xml

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

</xian>

</city>

</province>

</province>

</select>

2.创建BlueParseXML.js,用来加载解析XML文档

/**

* @description 解析并封装XML

* @author BluesLee

* @lastModif BluesLee

* @createDate 2007-10-13

* @modifDate 2007-10-15

* @version 1.0

//解析XML文件对象构造器

function BlueParseXML(){

}

BlueParseXML.prototype.xml;//定义对象属性xml

BlueParseXML.prototype.loadFinish;//加载完成函数

BlueParseXML.prototype.nodeProperties=new Array();//节点属性数组

BlueParseXML.prototype.key="key";

BlueParseXML.prototype.value="value";

BlueParseXML.prototype.nodeList;//节点集合

BlueParseXML.prototype.rootName;

BlueParseXML.XML_NULL=-1;//未加载xml，或加载失败

//加载xml文件

BlueParseXML.prototype.loadXML=function(url){

var newXML;

var obj=this;

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

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

//创建新的Document对象

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

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

newXML.onload=function(){

if(obj.loadFinish){

obj.loadFinish();

}

newXML.load(url);

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

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

//设置onload

newXML.onreadystatechange=function(){

if(newXML.readyState==4){

if(obj.loadFinish){

obj.loadFinish();

}

newXML.load(url);

}

this.xml=newXML;

}

//解析遍历xml

BlueParseXML.prototype.parseXML=function(){

if(this.xml==null){

alert("XML未加载，请先加载XML文件！");

return parseXML.XML_NULL;

}

var rootNode=this.xml.documentElement;

this.rootName=rootNode.tagName;

this.nodeList=new ChildNodeList();

this.level=this.iteratorNode(this.nodeList,rootNode,1);

return this.level;

}

//遍历节点,将节点信息封装存入ChildNodeList中

BlueParseXML.prototype.iteratorNode=function(list,node,level){

if(!isNaN(level) && level>0){

list.nodeLevel=level;

}

var result=list.nodeLevel;//节点级别

var flag=true;//判断节点是否有子节点标记

for(var child=node.firstChild;child!=null;child=child.nextSibling){

flag=false;//有子节点

if(list.nodeName==null || list.nodeName==""){

list.nodeName=child.tagName;

}

if(list.nodeName==child.tagName){

var nodeInfo=new NodeInfo();

nodeInfo.nodeLevel=list.nodeLevel;//设置节点级别

nodeInfo.nodeName=list.nodeName;//设置节点名称

nodeInfo.key=child.getAttribute(this.key);//设置节点属性

nodeInfo.value=child.getAttribute(this.value);

for(var index=0;index<this.nodeProperties.length;index++){

nodeInfo[this.nodeProperties[index]]=child.getAttribute(this.nodeProperties[index]);

}

list.addElement(nodeInfo.key,nodeInfo);//把节点加入父节点的子节点集合

var n=this.iteratorNode(nodeInfo.childNodeList,child,list.nodeLevel+1);

if(n>result){//如果子节点返回的节点级别大于改节点级别,设置返回节点级别为最大级别

result=n;

}

if(flag){//当改节点没有子节点时返回的节点级别-1

result=result-1;

}

return result;

}

//扩展String对象，增加trim方法去掉字符串前后空格

String.prototype.trim=function(){

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

}

/**

* @description 自定义集合对象(利用对象属性键值对，类似Hashtable使用)

* @author BluesLee

* @lastModif BluesLee

* @createDate 2007-10-13

* @modifDate 2007-10-15

* @version 1.0

ChildNodeList.prototype.nodeLevel=1;

ChildNodeList.prototype.nodeName;

ChildNodeList.prototype.keyArray;

ChildNodeList.prototype.ELEMENT_NULL=-1;//元素为空

ChildNodeList.prototype.ELEMENT_EXIST=-2;//元素已经存在

ChildNodeList.prototype.ELEMENT_NOT_EXIST=-3;//元素不存在

ChildNodeList.prototype.INDEX_OUT=-4//数组下标越界

ChildNodeList.prototype.ERROR_DELETE=-5//删除元素出错

function ChildNodeList(){

this.keyArray=new Array();

}

//添加集合元素

ChildNodeList.prototype.addElement=function(key,element){

if(key==null || element==null){

return ChildNodeList.ELEMENT_NULL;

}

if(this[key]!=null){

return ChildNodeList.ELEMENT_EXIST;

}

var index=this.keyArray.length;

this.keyArray[index]=key;

this[key]=element;

return index;

}

//根据下标删除集合元素

ChildNodeList.prototype.deleteElementByIndex=function(index){

if(index>=this.keyArray.length){

return ChildNodeList.INDEX_OUT;

}

var key=this.keyArray[index];

for(var i=index;i<this.keyArray.length;i++){

this.keyArray[i]=this.keyArray[i+1];

}

this.keyArray.length=this.keyArray.length-1;

delete this[key];

return index;

}

//根据key删除集合元素

ChildNodeList.prototype.deleteElementByKey=function(key){

if(this[key]==null){

return ChildNodeList.ELEMENT_NOT_EXIST;

}

for(var index=0;index<this.keyArray.length;index++){

if(this.keyArray[index]==key){

return this.deleteElementByIndex(index);

}

return ChildNodeList.ERROR_DELETE;

}

//根据key查找元素

ChildNodeList.prototype.getElementByKey=function(key){

return this[key];

}

//根据下标查找元素

ChildNodeList.prototype.getElementByIndex=function(index){

return this.getElementByKey(this.keyArray[index]);

}

//获取集合大小

ChildNodeList.prototype.size=function(){

return this.keyArray.length;

}

/**

* @description 节点信息封装对象

* @author BluesLee

* @lastModif BluesLee

* @createDate 2007-10-13

* @modifDate 2007-10-15

* @version 1.0

NodeInfo.prototype.nodeLevel;

NodeInfo.prototype.nodeName;//节点名称

NodeInfo.prototype.key;//节点名称,对应xml节点key属性

NodeInfo.prototype.value;//节点内容，对应xml节点value属性

NodeInfo.prototype.childNodeList;//子节点列表，用ChildNodeList对象封装

//构造器

function NodeInfo(){

this.childNodeList=new ChildNodeList();

}

3.创建BlueCasadedSelect.js文件,用来生成级联下拉框

/**

* @description 级联下拉对象

* @author BluesLee

* @lastModif BluesLee

* @createDate 2007-10-13

* @modifDate 2007-10-15

* @version 1.0

BlueCasadedSelect.prototype.selectList;

BlueCasadedSelect.prototype.defaultValue="-1";

BlueCasadedSelect.prototype.defaultText="请选择…";

BlueCasadedSelect.prototype.nodeList;//节点总集合

BlueCasadedSelect.prototype.isAddOnChangeEvent=false;

BlueCasadedSelect.prototype.SELECTLIST_NULL=-1;//下拉对象数组为空

BlueCasadedSelect.prototype.SELECTLIST_TYPE_NOT_ARRAY=-2;//下拉对象数组不是数组对象

BlueCasadedSelect.prototype.SELECTLIST_EMPTY=-3;//下拉对象数组为空数组

BlueCasadedSelect.prototype.SELECTLIST_LENGTH_OUT=-4;//下拉对象数组小于节点集合级别

BlueCasadedSelect.prototype.NODELIST_EMPTY=-5;//节点集合为空

BlueCasadedSelect.prototype.EVENT_NULL=-6;//事件源为空

//构造器

function BlueCasadedSelect(nodeList){

if(nodeList!=null){

this.nodeList=nodeList;

}else{

this.nodeList=new ChildNodeList();

}

/**

* 创建下拉列表

* @author BluesLee

* @lastModif BluesLee

* @createDate 2007-10-13

* @lastModifDate 2007-10-13

* @param parentNode 下拉列表父节点对象

* @param nameList 下拉列表名字集合[可选参数]

* @version 1.0

BlueCasadedSelect.prototype.createSelect=function(parentNode,nameList){

if(nameList==null){

if(this.nodeList.size()>0){

return this.createSelectDefault(parentNode,this.nodeList);

}

return this.NODELIST_EMPTY;

}

if(this.selectList==null){

this.selectList=new Array();

}

this.selectList.length=nameList.length;

var obj=this;

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

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

select.setAttribute("name",nameList[i]);

select.setAttribute("id",nameList[i]);

select.options.length=1;

select.options[0].value=this.defaultValue;

select.options[0].text=this.defaultText;

if(i<nameList.length-1){

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

this.isAddOnChangeEvent=true;

}

this.selectList[i]=select;

parentNode.appendChild(select);

}

return this.selectList.length;

}

/**

* 创建下拉列表(默认创建方法)

* @author BluesLee

* @lastModif BluesLee

* @createDate 2007-10-13

* @lastModifDate 2007-10-13

* @param parentNode 下拉列表父节点对象

* @param nodeList XML文档节点集合

* @version 1.0

BlueCasadedSelect.prototype.createSelectDefault=function(parentNode,nodeList){

if(this.selectList==null){

this.selectList=new Array();

}

var obj=this;

if(nodeList!=null && nodeList.nodeName!=null){

this.selectList.length=this.selectList.length+1;

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

select.setAttribute("name",nodeList.nodeName);

select.setAttribute("id",nodeList.nodeName);

select.options.length=1;

select.options[0].value=this.defaultValue;

select.options[0].text=this.defaultText;

this.selectList[this.selectList.length-1]=select;

parentNode.appendChild(select);

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

var childNodeList=nodeList.getElementByIndex(i).childNodeList;

if(childNodeList.size()>0){

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

this.isAddOnChangeEvent=true;

this.createSelectDefault(parentNode,childNodeList);

break;

}

return this.selectList.length;

}

/**

* 添加下拉列表onChange事件响应

* @author BluesLee

* @lastModif BluesLee

* @createDate 2007-10-13

* @lastModifDate 2007-10-13

* @version 1.0

BlueCasadedSelect.prototype.addOnChangeEvent=function(){

if(this.isAddOnChangeEvent){

return;

}

if(this.selectList==null){

return this.SELECTLIST_NULL;

}

if(this.selectList.constructor!=Array){

return this.SELECTLIST_TYPE_NOT_ARRAY;

}

if(this.selectList.length<=0){

return this.SELECTLIST_EMPTY;

}

var obj=this;

for(var i=0;i<this.selectList.length-1;i++){

var select=this.selectList[i];

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

}

this.isAddOnChangeEvent=true;

}

/**

* 初始化下拉列表

* @author BluesLee

* @lastModif BluesLee

* @createDate 2007-10-13

* @lastModifDate 2007-10-13

* @param paramList 初始化每一级下拉默认选项参数列表

* @param nodeList XML文档节点集合[可选参数]

* @version 1.0

BlueCasadedSelect.prototype.init=function(paramList,nodeList){

var currentList;

if(nodeList==null){

currentList=this.nodeList;

}else{

currentList=nodeList;

}

if(this.selectList==null){

return this.SELECTLIST_NULL;

}

if(this.selectList.constructor!=Array){

return this.SELECTLIST_TYPE_NOT_ARRAY;

}

if(this.selectList.length<=0){

return this.SELECTLIST_EMPTY;

}

if(this.selectList.length<currentList.nodeLevel){

return this.SELECTLIST_LENGTH_OUT;

}

if(currentList.size()<=0){

return this.NODELIST_EMPTY;

}

var select=this.selectList[currentList.nodeLevel-1];

var defaultValue=paramList[currentList.nodeLevel-1];

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

var nodeInfo=currentList.getElementByIndex(i);

var index=select.options.length;

select.options.length=index+1;

select.options[index].value=nodeInfo.key;

select.options[index].text=nodeInfo.value;

if(defaultValue!=null && defaultValue==nodeInfo.key){

select.options[index].selected=true;

if(nodeInfo.childNodeList.size()<=0){

for(var j=currentList.nodeLevel;j<this.selectList.length;j++){

var sel=this.selectList[j];

var n=sel.options.length;

sel.options.length=n+1;

sel.options[n].value=nodeInfo.key;

sel.options[n].text=nodeInfo.value;

sel.options[n].selected=true;

}

}else{

this.init(paramList,nodeInfo.childNodeList);

}

return select.options.length;

}

/**

* 下拉列表联动

* @author BluesLee

* @lastModif BluesLee

* @createDate 2007-10-13

* @lastModifDate 2007-10-13

* @param event 事件源下拉对象

* @version 1.0

BlueCasadedSelect.prototype.changeSelect=function(event){

if(event==null){

return this.EVENT_NULL;

}

if(this.selectList==null){

return this.SELECTLIST_NULL;

}

if(this.selectList.constructor!=Array){

return this.SELECTLIST_TYPE_NOT_ARRAY;

}

if(this.selectList.length<=0){

return this.SELECTLIST_EMPTY;

}

if(this.nodeList.size()<=0){

return this.NODELIST_EMPTY;

}

var nextList=this.nodeList;

var nextSelect=event;

var flag=false;

var n=0;

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

var select=this.selectList[i];

if(flag){

this.selectList[i].options.length=1;

}else{

if(nextList.getElementByKey(select.value)!=null){

nextList=nextList.getElementByKey(select.value).childNodeList;

}else{

nextList=new ChildNodeList();

}

if(select==event){

nextSelect=this.selectList[i+1];

flag=true;

n=i;

}

if(nextList.size()<=0 && event.value!=this.defaultValue){

for(var i=n+1;i<this.selectList.length;i++){

nextSelect=this.selectList[i];

var index=nextSelect.options.length;

nextSelect.options.length=index+1;

nextSelect.options[index].value=event.value;

nextSelect.options[index].text=event.options[event.selectedIndex].text;

nextSelect.options[index].selected=true;

}

return nextSelect.options.length;

}

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

var nodeInfo=nextList.getElementByIndex(i);

var index=nextSelect.options.length;

nextSelect.options.length=index+1;

nextSelect.options[index].value=nodeInfo.key;

nextSelect.options[index].text=nodeInfo.value;

}

return nextSelect.options.length;

}

4.创建测试页面cascaded_select.html

//加载XML

</script>

//生成级联下拉

</script>

<body>

</body>

function finish(){

alert("加载完成");

}

var myxml=new BlueParseXML();

//添加xml加载完成事件响应

myxml.loadFinish=finish;

myxml.loadXML("cascaded_select.xml");

var level=myxml.parseXML();

//多级级联下拉

var blueCasadedSelect=new BlueCasadedSelect(myxml.nodeList);

//生成下拉列表，下拉列表name属性为xml节点名

blueCasadedSelect.createSelect(document.body);

//如果下拉列表提前已有，则不需生成，需要设置下拉列表集合为已有下拉集合，并添加onchange事件响应内容

//blueCasadedSelect.selectList=sels;

//blueCasadedSelect.addOnChangeEvent();

blueCasadedSelect.init(new Array("sx","xa"));

//简单的树结构遍历测试

//====================================

document.write("<br>");

function iterator(list){

if(list.size()<=0){

return;

}

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

var obj=list.getElementByIndex(i);

for(var j=1;j<list.nodeLevel;j++){

document.write("——");

}

document.write("<a href='"+obj.key+"'>"+obj.nodeLevel+obj.value+"</a><br>");

iterator(obj.childNodeList);

}

iterator(myxml.nodeList);

//====================================

</script>