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

1.创建XML文档:cascaded_select.xml

1. <?xml version="1.0" encoding="GBK"?>
2. <select>
3.     <province key="sx" value="陕西">
4.         <city key="xa" value="西安"/>
5.         <city key="bj" value="宝鸡"/>
6.         <city key="wn" value="渭南">
7.             <xian key="fp" value="富平">
8.                 <zhen key="zq" value="张桥"/>
9.             </xian>
10.         </city>
11.         <city key="ak" value="安康"/>
12.     </province>
13.     <province key="js" value="江苏">
14.         <city key="nj" value="南京"/>
15.         <city key="xz" value="徐州"/>
16.     </province>
17.     <province key="sh" value="上海"/>
18. </select>

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

1. /**
2.  * @description 解析并封装XML
3.  * @author BluesLee
4.  * @lastModif BluesLee
5.  * @createDate 2007-10-13
6.  * @modifDate 2007-10-15
7.  * @version 1.0
8.  */
9.     //解析XML文件对象构造器
10.     function BlueParseXML(){
11.     }    
12.     BlueParseXML.prototype.xml;//定义对象属性xml
13.     BlueParseXML.prototype.loadFinish;//加载完成函数
14.     BlueParseXML.prototype.nodeProperties=new Array();//节点属性数组
15.     BlueParseXML.prototype.key="key";
16.     BlueParseXML.prototype.value="value";
17.     BlueParseXML.prototype.nodeList;//节点集合
18.     BlueParseXML.prototype.rootName;
19.     BlueParseXML.XML_NULL=-1;//未加载xml，或加载失败
21.     //加载xml文件
22.     BlueParseXML.prototype.loadXML=function(url){
23.         var newXML;
24.         var obj=this;
25.         //如果它受支持，采用标准的2级DOM技术
26.         if(document.implementation && document.implementation.createDocument){
27.             //创建新的Document对象
28.             newXML=document.implementation.createDocument("","",null);
29.             //设置装载完毕时触发事件
30.             newXML.οnlοad=function(){
31.                 if(obj.loadFinish){
32.                     obj.loadFinish();
33.                 }
34.             }
35.             newXML.load(url);
36.         }else{//IE浏览器创建Document对象
37.             newXML=new ActiveXObject("Microsoft.XMLDOM");
38.             //设置onload
39.             newXML.onreadystatechange=function(){
40.                 if(newXML.readyState==4){
41.                     if(obj.loadFinish){
42.                         obj.loadFinish();
43.                     }
44.                 }
45.             }
46.             newXML.load(url);
47.         }
48.         this.xml=newXML;
49.     }
51.     //解析遍历xml
52.     BlueParseXML.prototype.parseXML=function(){
53.         if(this.xml==null){
54.             alert("XML未加载，请先加载XML文件！");
55.             return parseXML.XML_NULL;
56.         }
57.         var rootNode=this.xml.documentElement;
58.         this.rootName=rootNode.tagName;
59.         this.nodeList=new ChildNodeList();
60.         this.level=this.iteratorNode(this.nodeList,rootNode,1);
61.         return this.level;
62.     }
63.     //遍历节点,将节点信息封装存入ChildNodeList中
64.     BlueParseXML.prototype.iteratorNode=function(list,node,level){
65.         if(!isNaN(level) && level>0){
66.             list.nodeLevel=level;
67.         }
68.         var result=list.nodeLevel;//节点级别
69.         var flag=true;//判断节点是否有子节点标记
70.         for(var child=node.firstChild;child!=null;child=child.nextSibling){
71.             flag=false;//有子节点
72.             if(list.nodeName==null || list.nodeName==""){
73.                 list.nodeName=child.tagName;                
74.             }
75.             if(list.nodeName==child.tagName){
76.                 var nodeInfo=new NodeInfo();
77.                 nodeInfo.nodeLevel=list.nodeLevel;//设置节点级别
78.                 nodeInfo.nodeName=list.nodeName;//设置节点名称
79.                 nodeInfo.key=child.getAttribute(this.key);//设置节点属性
80.                 nodeInfo.value=child.getAttribute(this.value);
81.                 for(var index=0;index<this.nodeProperties.length;index++){
82.                     nodeInfo[this.nodeProperties[index]]=child.getAttribute(this.nodeProperties[index]);
83.                 }
84.                 list.addElement(nodeInfo.key,nodeInfo);//把节点加入父节点的子节点集合            
85.                 var n=this.iteratorNode(nodeInfo.childNodeList,child,list.nodeLevel+1);
86.                 if(n>result){//如果子节点返回的节点级别大于改节点级别,设置返回节点级别为最大级别
87.                     result=n;
88.                 }
89.             }
90.         }
91.         if(flag){//当改节点没有子节点时返回的节点级别-1
92.             result=result-1;
93.         }
94.         return result;
95.     }
96.     //扩展String对象，增加trim方法去掉字符串前后空格
97.     String.prototype.trim=function(){        
98.         return this.replace(/^s*/g,"").replace(/s*$/g,"");
99.     }
100.     /**//** 
101.      * @description 自定义集合对象(利用对象属性键值对，类似Hashtable使用)
102.      * @author BluesLee
103.      * @lastModif BluesLee
104.      * @createDate 2007-10-13
105.      * @modifDate 2007-10-15
106.       * @version 1.0
107.      */
108.     ChildNodeList.prototype.nodeLevel=1;
109.     ChildNodeList.prototype.nodeName;
110.     ChildNodeList.prototype.keyArray;
111.     ChildNodeList.prototype.ELEMENT_NULL=-1;//元素为空
112.     ChildNodeList.prototype.ELEMENT_EXIST=-2;//元素已经存在
113.     ChildNodeList.prototype.ELEMENT_NOT_EXIST=-3;//元素不存在
114.     ChildNodeList.prototype.INDEX_OUT=-4//数组下标越界
115.     ChildNodeList.prototype.ERROR_DELETE=-5//删除元素出错
116.     function ChildNodeList(){
117.         this.keyArray=new Array();
118.     }
119.     //添加集合元素
120.     ChildNodeList.prototype.addElement=function(key,element){
121.         if(key==null || element==null){
122.             return ChildNodeList.ELEMENT_NULL;
123.         }
124.         if(this[key]!=null){
125.             return ChildNodeList.ELEMENT_EXIST;
126.         }
127.         var index=this.keyArray.length;
128.         this.keyArray[index]=key;
129.         this[key]=element;
130.         return index;
131.     }
132.     //根据下标删除集合元素
133.     ChildNodeList.prototype.deleteElementByIndex=function(index){
134.         if(index>=this.keyArray.length){
135.             return ChildNodeList.INDEX_OUT;
136.         }
137.         var key=this.keyArray[index];
138.         for(var i=index;i<this.keyArray.length;i++){
139.             this.keyArray[i]=this.keyArray[i+1];
140.         }
141.         this.keyArray.length=this.keyArray.length-1;
142.         delete this[key];
143.         return index;
144.     }
145.     //根据key删除集合元素
146.     ChildNodeList.prototype.deleteElementByKey=function(key){
147.         if(this[key]==null){
148.             return ChildNodeList.ELEMENT_NOT_EXIST;
149.         }
150.         for(var index=0;index<this.keyArray.length;index++){
151.             if(this.keyArray[index]==key){
152.                 return this.deleteElementByIndex(index);
153.             }
154.         }
155.         return ChildNodeList.ERROR_DELETE;
156.     }
157.     //根据key查找元素
158.     ChildNodeList.prototype.getElementByKey=function(key){
159.         return this[key];
160.     }
161.     //根据下标查找元素
162.     ChildNodeList.prototype.getElementByIndex=function(index){
163.         return this.getElementByKey(this.keyArray[index]);
164.     }
165.     //获取集合大小
166.     ChildNodeList.prototype.size=function(){
167.         return this.keyArray.length;
168.     }
170.     /**//** 
171.      * @description 节点信息封装对象
172.      * @author BluesLee
173.      * @lastModif BluesLee
174.      * @createDate 2007-10-13
175.      * @modifDate 2007-10-15
176.       * @version 1.0
177.      */
178.     NodeInfo.prototype.nodeLevel;
179.     NodeInfo.prototype.nodeName;//节点名称
180.     NodeInfo.prototype.key;//节点名称,对应xml节点key属性
181.     NodeInfo.prototype.value;//节点内容，对应xml节点value属性
182.     NodeInfo.prototype.childNodeList;//子节点列表，用ChildNodeList对象封装
183.     //构造器
184.     function NodeInfo(){
185.         this.childNodeList=new ChildNodeList();
186.     }

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

1. /** 
2.  * @description 级联下拉对象
3.  * @author BluesLee
4.  * @lastModif BluesLee
5.  * @createDate 2007-10-13
6.  * @modifDate 2007-10-15
7.  * @version 1.0
8.  */
9. BlueCasadedSelect.prototype.selectList;
10. BlueCasadedSelect.prototype.defaultValue="-1";
11. BlueCasadedSelect.prototype.defaultText="请选择…";
12. BlueCasadedSelect.prototype.nodeList;//节点总集合
13. BlueCasadedSelect.prototype.isAddOnChangeEvent=false;
14. BlueCasadedSelect.prototype.SELECTLIST_NULL=-1;//下拉对象数组为空
15. BlueCasadedSelect.prototype.SELECTLIST_TYPE_NOT_ARRAY=-2;//下拉对象数组不是数组对象
16. BlueCasadedSelect.prototype.SELECTLIST_EMPTY=-3;//下拉对象数组为空数组
17. BlueCasadedSelect.prototype.SELECTLIST_LENGTH_OUT=-4;//下拉对象数组小于节点集合级别
18. BlueCasadedSelect.prototype.NODELIST_EMPTY=-5;//节点集合为空
19. BlueCasadedSelect.prototype.EVENT_NULL=-6;//事件源为空
20. //构造器
21. function BlueCasadedSelect(nodeList){
22.     if(nodeList!=null){
23.         this.nodeList=nodeList;
24.     }else{
25.         this.nodeList=new ChildNodeList();
26.     }
27. }
28. /**//**
29.  * 创建下拉列表
30.  * @author BluesLee
31.  * @lastModif BluesLee
32.  * @createDate 2007-10-13
33.  * @lastModifDate 2007-10-13
34.  * @param parentNode 下拉列表父节点对象
35.  * @param nameList 下拉列表名字集合[可选参数]
36.  * @version 1.0
37.  */
38. BlueCasadedSelect.prototype.createSelect=function(parentNode,nameList){
39.     if(nameList==null){
40.         if(this.nodeList.size()>0){
41.             return this.createSelectDefault(parentNode,this.nodeList);
42.         }
43.         return this.NODELIST_EMPTY;
44.     }
45.     if(this.selectList==null){
46.         this.selectList=new Array();
47.     }
48.     this.selectList.length=nameList.length;
49.     var obj=this;
50.     for(var i=0;i<nameList.length;i++){
51.         var select=document.createElement("select");
52.         select.setAttribute("name",nameList[i]);
53.         select.setAttribute("id",nameList[i]);
54.         select.options.length=1;
55.         select.options[0].value=this.defaultValue;
56.         select.options[0].text=this.defaultText;
57.         if(i<nameList.length-1){
58.             select.attachEvent("onchange",function(){obj.changeSelect(select);});
59.             this.isAddOnChangeEvent=true;
60.         }
61.         this.selectList[i]=select;
62.         parentNode.appendChild(select);
63.     }
64.     return this.selectList.length;
65. }
67. /**//**
68.  * 创建下拉列表(默认创建方法)
69.  * @author BluesLee
70.  * @lastModif BluesLee
71.  * @createDate 2007-10-13
72.  * @lastModifDate 2007-10-13
73.  * @param parentNode 下拉列表父节点对象
74.  * @param nodeList XML文档节点集合
75.  * @version 1.0
76.  */
77. BlueCasadedSelect.prototype.createSelectDefault=function(parentNode,nodeList){
78.     if(this.selectList==null){
79.         this.selectList=new Array();
80.     }
81.     var obj=this;
82.     if(nodeList!=null && nodeList.nodeName!=null){
83.         this.selectList.length=this.selectList.length+1;
84.         var select=document.createElement("select");
85.         select.setAttribute("name",nodeList.nodeName);
86.         select.setAttribute("id",nodeList.nodeName);        
87.         select.options.length=1;
88.         select.options[0].value=this.defaultValue;
89.         select.options[0].text=this.defaultText;
90.         this.selectList[this.selectList.length-1]=select;
91.         parentNode.appendChild(select);
92.         for(var i=0;i<nodeList.size();i++){            
93.             var childNodeList=nodeList.getElementByIndex(i).childNodeList;
94.             if(childNodeList.size()>0){
95.                 select.attachEvent("onchange",function(){obj.changeSelect(select);});
96.                 this.isAddOnChangeEvent=true;
97.                 this.createSelectDefault(parentNode,childNodeList);
98.                 break;
99.             }            
100.         }
101.     }
102.     return this.selectList.length;
103. }
105. /**//**
106.  * 添加下拉列表onChange事件响应
107.  * @author BluesLee
108.  * @lastModif BluesLee
109.  * @createDate 2007-10-13
110.  * @lastModifDate 2007-10-13
111.  * @version 1.0
112.  */
113. BlueCasadedSelect.prototype.addOnChangeEvent=function(){
114.     if(this.isAddOnChangeEvent){
115.         return;
116.     }
117.     if(this.selectList==null){
118.         return this.SELECTLIST_NULL;
119.     }
120.     if(this.selectList.constructor!=Array){
121.         return this.SELECTLIST_TYPE_NOT_ARRAY;
122.     }
123.     if(this.selectList.length<=0){
124.         return this.SELECTLIST_EMPTY;
125.     }
126.     var obj=this;
127.     for(var i=0;i<this.selectList.length-1;i++){
128.         var select=this.selectList[i];
129.         select.attachEvent("onchange",function(){obj.changeSelect(select);});
130.     }
131.     this.isAddOnChangeEvent=true;
132. }
134. /**//**
135.  * 初始化下拉列表
136.  * @author BluesLee
137.  * @lastModif BluesLee
138.  * @createDate 2007-10-13
139.  * @lastModifDate 2007-10-13
140.  * @param paramList 初始化每一级下拉默认选项参数列表
141.  * @param nodeList XML文档节点集合[可选参数]
142.  * @version 1.0
143.  */
144. BlueCasadedSelect.prototype.init=function(paramList,nodeList){
145.     var currentList;
146.     if(nodeList==null){
147.         currentList=this.nodeList;
148.     }else{
149.         currentList=nodeList;
150.     }
151.     if(this.selectList==null){
152.         return this.SELECTLIST_NULL;
153.     }
154.     if(this.selectList.constructor!=Array){
155.         return this.SELECTLIST_TYPE_NOT_ARRAY;
156.     }
157.     if(this.selectList.length<=0){
158.         return this.SELECTLIST_EMPTY;
159.     }
160.     if(this.selectList.length<currentList.nodeLevel){
161.         return this.SELECTLIST_LENGTH_OUT;
162.     }
163.     if(currentList.size()<=0){        
164.         return this.NODELIST_EMPTY;
165.     }
166.     var select=this.selectList[currentList.nodeLevel-1];
167.     var defaultValue=paramList[currentList.nodeLevel-1];
168.     for(var i=0;i<currentList.size();i++){
169.         var nodeInfo=currentList.getElementByIndex(i);
170.         var index=select.options.length;
171.         select.options.length=index+1;
172.         select.options[index].value=nodeInfo.key;
173.         select.options[index].text=nodeInfo.value;
174.         if(defaultValue!=null && defaultValue==nodeInfo.key){
175.             select.options[index].selected=true;
176.             if(nodeInfo.childNodeList.size()<=0){
177.                 for(var j=currentList.nodeLevel;j<this.selectList.length;j++){
178.                     var sel=this.selectList[j];
179.                     var n=sel.options.length;
180.                     sel.options.length=n+1;                    
181.                     sel.options[n].value=nodeInfo.key;
182.                     sel.options[n].text=nodeInfo.value;
183.                     sel.options[n].selected=true;
184.                 }
185.             }else{
186.                 this.init(paramList,nodeInfo.childNodeList);
187.             }
188.         }
189.     }
190.     return select.options.length;
191. }
193. /**//**
194.  * 下拉列表联动
195.  * @author BluesLee
196.  * @lastModif BluesLee
197.  * @createDate 2007-10-13
198.  * @lastModifDate 2007-10-13
199.  * @param event 事件源下拉对象
200.  * @version 1.0
201.  */
202. BlueCasadedSelect.prototype.changeSelect=function(event){
203.     if(event==null){
204.         return this.EVENT_NULL;
205.     }
206.     if(this.selectList==null){
207.         return this.SELECTLIST_NULL;
208.     }
209.     if(this.selectList.constructor!=Array){
210.         return this.SELECTLIST_TYPE_NOT_ARRAY;
211.     }
212.     if(this.selectList.length<=0){
213.         return this.SELECTLIST_EMPTY;
214.     }
215.     if(this.nodeList.size()<=0){
216.         return this.NODELIST_EMPTY;
217.     }
218.     var nextList=this.nodeList;
219.     var nextSelect=event;
220.     var flag=false;
221.     var n=0;
222.     for(var i=0;i<this.selectList.length;i++){
223.         var select=this.selectList[i];
224.         if(flag){
225.             this.selectList[i].options.length=1;
226.         }else{
227.             if(nextList.getElementByKey(select.value)!=null){
228.                 nextList=nextList.getElementByKey(select.value).childNodeList;
229.             }else{
230.                 nextList=new ChildNodeList();
231.             }
232.         }
233.         if(select==event){
234.             nextSelect=this.selectList[i+1];
235.             flag=true;
236.             n=i;
237.         }
238.     }
239.     if(nextList.size()<=0 && event.value!=this.defaultValue){
240.         for(var i=n+1;i<this.selectList.length;i++){
241.             nextSelect=this.selectList[i];
242.             var index=nextSelect.options.length;
243.             nextSelect.options.length=index+1;
244.             nextSelect.options[index].value=event.value;
245.             nextSelect.options[index].text=event.options[event.selectedIndex].text;
246.             nextSelect.options[index].selected=true;
247.         }
248.         return nextSelect.options.length;
249.     }
250.     for(var i=0;i<nextList.size();i++){
251.         var nodeInfo=nextList.getElementByIndex(i);
252.         var index=nextSelect.options.length;
253.         nextSelect.options.length=index+1;
254.         nextSelect.options[index].value=nodeInfo.key;
255.         nextSelect.options[index].text=nodeInfo.value;
256.     }
257.     return nextSelect.options.length;
258. }

4.创建测试页面cascaded_select.html

1. <!--深蓝忧郁级联下拉框-->
2. <script src="BlueParseXML.js">
3. //加载XML
4. </script>
5. <script src="BlueCasadedSelect.js">
6. //生成级联下拉
7. </script>
8. <body>
9. </body>
10. <script>
11.     function finish(){
12.         alert("加载完成");
13.     }
14.     var myxml=new BlueParseXML();
15.     //添加xml加载完成事件响应
16.     myxml.loadFinish=finish;
17.     myxml.loadXML("cascaded_select.xml");
18.     var level=myxml.parseXML();
20.     //多级级联下拉
21.     var blueCasadedSelect=new BlueCasadedSelect(myxml.nodeList);
22.     //生成下拉列表，下拉列表name属性为xml节点名
23.     blueCasadedSelect.createSelect(document.body);
24.     //如果下拉列表提前已有，则不需生成，需要设置下拉列表集合为已有下拉集合，并添加onchange事件响应内容
25.     //blueCasadedSelect.selectList=sels;
26.     //blueCasadedSelect.addOnChangeEvent();
27.     blueCasadedSelect.init(new Array("sx","xa"));
29.         //简单的树结构遍历测试
30.     //====================================
31.     document.write("<br>");
32.     function iterator(list){
33.         if(list.size()<=0){
34.             return;
35.         }
36.         for(var i=0;i<list.size();i++){
37.             var obj=list.getElementByIndex(i);
38.             for(var j=1;j<list.nodeLevel;j++){
39.                 document.write("——");
40.             }
41.             document.write("<a href='"+obj.key+"'>"+obj.nodeLevel+obj.value+"</a><br>");
42.             iterator(obj.childNodeList);
43.         }
44.     }
45.     iterator(myxml.nodeList);
46.     //====================================
47. </script>

http://blog.csdn.net/lip009/archive/2007/10/15/1826028.aspx