另外發現有人說用樹的方式會更靈活和方便，如圖

?

?

花了半天時間實現一個多級聯動下拉框，目的是對某一植物進行“門綱目科屬”的歸類。使用的技術是javascript+xml，之所以不用數據庫，一來這 方面的數據雖然量大但都是固定不變的，二來不希望加重服務器的負擔，第三是因為這種多級從屬關系的數據不太適合放在數據庫里。

這是大概的思路：
1、讀取xml文件
2、當一個下拉框選中某選項時，根據該選項，當前節點指向下一層，進入下一層下拉框的設置
3、取消當前下拉框的禁用，禁用下一層的下拉框
4、清空當前下拉框的選項
5、根據當前節點讀取xml的數據，設置下拉框選項
6、返回步驟2

代碼：
JavaScript

Javascript代碼 ?

1. var ?xmlDoc;????
2. var ?browserType;??
3. var ?currentNode; //當前所在節點 ??
4. ??
5. setBrowserType();??
6. loadXml( "classify.xml" );??
7. ??
8. //讀取xml文件數據并設置門、綱、目、科、屬的下拉框 ??
9. ??
10. //設置“門”的下拉框 ??
11. function ?setPhylum(){??
12. ????currentNode=xmlDoc.documentElement;??
13. ???? var ?phylums=xmlDoc.documentElement.childNodes;??
14. ???? var ?phylumName;??
15. ???? if (browserType== "IE" ){??
16. ???????? for ( var ?i=0;i<phylums.length;i++){??
17. ???????????? //從門到屬，都有name屬性標簽，并且所有下拉框選項索引都是從1開始 ??
18. ????????????phylumName=phylums[i].selectNodes( "name" )[0].text;??
19. ????????????document.forms[0].phylum.options[i+1]= new ?Option(phylumName,phylumName);??
20. ????????}??
21. ????}??
22. ???? else { //FF ??
23. ???????? //FireFox沒有selectNodes()方法，且其childNodes的對應索引是1,3,5,7... ??
24. ???????? for ( var ?i=1;i<phylums.length;i=i+2){??
25. ????????????phylumName=phylums[i].childNodes[1].textContent;??
26. ????????????document.forms[0].phylum.options[(i+1)/2]= new ?Option(phylumName,phylumName);??
27. ????????}??
28. ????????document.forms[0].clazz.disabled= "disabled" ;??
29. ????????document.forms[0].order.disabled= "disabled" ;??
30. ????????document.forms[0].family.disabled= "disabled" ;??
31. ????????document.forms[0].genus.disabled= "disabled" ;??
32. ????}??
33. }??
34. ??
35. //設置“綱”的下拉框 ??
36. function ?setClazz(selectedIndex){??
37. ???? //取消下拉框的禁用 ??
38. ???? //后面的下拉框禁用，這是因應各下拉框的無序選擇可能產生的錯誤 ??
39. ???? //比如選了“科”又回頭重新選“目”，或更改同一個下拉框選項) ??
40. ????document.forms[0].clazz.disabled= null ;??
41. ????document.forms[0].order.disabled= "disabled" ;??
42. ????document.forms[0].family.disabled= "disabled" ;??
43. ????document.forms[0].genus.disabled= "disabled" ;??
44. ??????
45. ????clearOption(document.forms[0].clazz);??
46. ???? var ?clazzes;??
47. ???? var ?clazzName;??
48. ???? //將選中的門節點作為當前節點，注意這里需要將索引回減1 ??
49. ???? //因為門的父節點沒有name屬性標簽，而下拉框的索引又是從1開始 ??
50. ???? //currentNode的賦值應使用絕對定位，也是因應各下拉框的無序選擇 ??
51. ???? //currentNode=currentNode.childNodes(selectedIndex-1); ??
52. ???? if (browserType== "IE" ){??
53. ????????currentNode=xmlDoc.documentElement.childNodes(selectedIndex-1);??
54. ????????clazzes=currentNode.childNodes;??
55. ???????? //因為門節點的第一個子節點為name屬性標簽，故循環時索引從1開始 ??
56. ???????? //相應的下拉框的索引就與綱節點的索引同步(不需要options[i+1])，目、科、屬也是一樣 ??
57. ???????? for ( var ?i=1;i<clazzes.length;i++){??
58. ????????????clazzName=clazzes[i].selectNodes( "name" )[0].text;??
59. ????????????document.forms[0].clazz.options[i]= new ?Option(clazzName,clazzName);??
60. ????????}??
61. ????}??
62. ???? else { //FF ??
63. ????????currentNode=xmlDoc.documentElement.childNodes[selectedIndex*2-1];??
64. ????????clazzes=currentNode.childNodes;??
65. ???????? for ( var ?i=1;i<clazzes.length-2;i=i+2){??
66. ????????????clazzName=clazzes[i+2].childNodes[1].textContent;??
67. ????????????document.forms[0].clazz.options[(i+1)/2]= new ?Option(clazzName,clazzName);??
68. ????????}??
69. ????}??
70. ??????
71. ??????
72. }??
73. ??
74. //設置“目”的下拉框 ??
75. function ?setOrder(selectedIndex){??
76. ???? //取消下拉框的禁用 ??
77. ???? //后面的下拉框禁用，這是因應各下拉框的無序選擇可能產生的錯誤(比如選了“科”又回頭重新選“目”) ??
78. ????document.forms[0].order.disabled= null ;??
79. ????document.forms[0].family.disabled= "disabled" ;??
80. ????document.forms[0].genus.disabled= "disabled" ;??
81. ??????
82. ????clearOption(document.forms[0].order);??
83. ???? var ?orderName;??
84. ???? //currentNode的賦值應使用絕對定位 ??
85. ???? var ?phylumSI=document.forms[0].phylum.selectedIndex;???? //phylum?selected?index ??
86. ???? if (browserType== "IE" ){??
87. ????????currentNode=xmlDoc.documentElement??
88. ????????????.childNodes[phylumSI-1]??
89. ????????????.childNodes[selectedIndex];??
90. ???????? var ?orders=currentNode.childNodes;??
91. ???????? for ( var ?i=1;i<orders.length;i++){??
92. ????????????orderName=orders[i].selectNodes( "name" )[0].text;??
93. ????????????document.forms[0].order.options[i]= new ?Option(orderName,orderName);??
94. ????????}??
95. ????} else {??
96. ????????currentNode=xmlDoc.documentElement??
97. ????????????.childNodes[phylumSI*2-1]??
98. ????????????.childNodes[selectedIndex*2+1];??
99. ???????? var ?orders=currentNode.childNodes;??
100. ???????? for ( var ?i=1;i<orders.length-2;i=i+2){??
101. ????????????orderName=orders[i+2].childNodes[1].textContent;??
102. ????????????document.forms[0].order.options[(i+1)/2]= new ?Option(orderName,orderName);??
103. ????????}??
104. ????}??
105. }??
106. ??
107. //設置“科”的下拉框 ??
108. function ?setFamily(selectedIndex){??
109. ????document.forms[0].family.disabled= null ; //取消下拉框的禁用 ??
110. ????document.forms[0].genus.disabled= "disabled" ; //后面的下拉框禁用 ??
111. ??????
112. ???? //currentNode的賦值應使用絕對定位 ??
113. ???? var ?phylumSI=document.forms[0].phylum.selectedIndex; //phylum?selected?index ??
114. ???? var ?clazzSI=document.forms[0].clazz.selectedIndex;?? //clazz?selected?index ??
115. ????clearOption(document.forms[0].family);??
116. ???? var ?families;??
117. ???? var ?familyName;??
118. ???? if (browserType== "IE" ){??
119. ????????currentNode=xmlDoc.documentElement??
120. ????????????.childNodes[phylumSI-1]??
121. ????????????.childNodes[clazzSI]??
122. ????????????.childNodes[selectedIndex];??
123. ????????families=currentNode.childNodes;??
124. ???????? for ( var ?i=1;i<families.length;i++){??
125. ????????????familyName=families[i].selectNodes( "name" )[0].text;??
126. ????????????document.forms[0].family.options[i]= new ?Option(familyName,familyName);??
127. ????????}??
128. ????}??
129. ???? else {??
130. ????????currentNode=xmlDoc.documentElement??
131. ????????????.childNodes[phylumSI*2-1]??
132. ????????????.childNodes[clazzSI*2+1]??
133. ????????????.childNodes[selectedIndex*2+1];??
134. ????????families=currentNode.childNodes;??
135. ???????? for ( var ?i=1;i<families.length-2;i=i+2){??
136. ????????????familyName=families[i+2].childNodes[1].textContent;??
137. ????????????document.forms[0].family.options[(i+1)/2]= new ?Option(familyName,familyName);??
138. ????????}??
139. ????}??
140. }??
141. ??
142. //設置“屬”的下拉框 ??
143. function ?setGenus(selectedIndex){??
144. ????document.forms[0].genus.disabled= null ; //取消下拉框的禁用 ??
145. ??????
146. ???? //currentNode的賦值應使用絕對定位 ??
147. ???? var ?phylumSI=document.forms[0].phylum.selectedIndex; //phylum?selected?index ??
148. ???? var ?clazzSI=document.forms[0].clazz.selectedIndex;?? //clazz?selected?index ??
149. ???? var ?orderSI=document.forms[0].order.selectedIndex;?? //order?selected?index ??
150. ????clearOption(document.forms[0].genus);??
151. ???? var ?genues;??
152. ???? var ?genusName;??
153. ??????
154. ???? if (browserType== "IE" ){??
155. ??????????
156. ????????currentNode=xmlDoc.documentElement??
157. ????????????.childNodes(phylumSI-1)??
158. ????????????.childNodes(clazzSI)??
159. ????????????.childNodes(orderSI)??
160. ????????????.childNodes(selectedIndex);??
161. ????????genuses=currentNode.childNodes;??
162. ???????? for ( var ?i=1;i<genuses.length;i++){??
163. ???????????? //屬為葉節點 ??
164. ???????????? var ?genusName=genuses[i].text;??
165. ????????????document.forms[0].genus.options[i]= new ?Option(genusName,genusName);??
166. ????????}??
167. ????}??
168. ???? else {??
169. ????????currentNode=xmlDoc.documentElement??
170. ????????????.childNodes[phylumSI*2-1]??
171. ????????????.childNodes[clazzSI*2+1]??
172. ????????????.childNodes[orderSI*2+1]??
173. ????????????.childNodes[selectedIndex*2+1];??
174. ????????genuses=currentNode.childNodes;??
175. ???????? for ( var ?i=1;i<genuses.length-2;i=i+2){??
176. ???????????? //屬為葉節點 ??
177. ???????????? var ?genusName=genuses[i+2].textContent;??
178. ????????????document.forms[0].genus.options[(i+1)/2]= new ?Option(genusName,genusName);??
179. ????????}??
180. ????}??
181. }??
182. ??
183. //清空下拉框選項 ??
184. function ?clearOption(selectElement){??
185. ???? for ( var ?i=1;i<selectElement.options.length;i++){??
186. ????????selectElement.options[i]= null ;??
187. ????}??
188. }??
189. ??
190. //判斷瀏覽器類型 ??
191. function ?setBrowserType(){??
192. ???? if ?(window.ActiveXObject){ //IE ??
193. ????????browserType= "IE" ;??
194. ????} else {??
195. ????????browserType= "FireFox" ;??
196. ????}??
197. }??
198. ??
199. //載入xml ??
200. function ?loadXml(xmlName){??
201. ???? if ?(browserType== "IE" ){ //IE ??
202. ????????xmlDoc?=? new ?ActiveXObject( "Microsoft.XMLDOM" );???
203. ????????xmlDoc.async?=? false ;??
204. ????????xmlDoc.load(xmlName);??
205. ????}? else {??
206. //??????xmlDoc=document.implementation.createDocument("",?"",?null); ??
207. //??????xmlDoc.async?=?false; ??
208. //??????xmlDoc.load("classify.xml"); ??
209. ????????browserType= "FireFox" ;??
210. ???????? var ?xmlHttp?=? new ?XMLHttpRequest();??
211. ????????xmlHttp.open(? "GET" ,? "classify.xml" ,? false ?)?;??
212. ????????xmlHttp.send( null )?;??
213. ????????xmlDoc=xmlHttp.responseXML;??
214. ??????????
215. ???????? //FireFox沒有selectNodes()方法，且xml中，其childNodes的對應索引是1,3,5,7... ??
216. //??????alert(xmlDoc.getElementsByTagName("phylum")[1] ??
217. //??????????.childNodes[3].childNodes[3].childNodes[1].textContent); ??
218. ????}??
219. }??

最后是xml文件的內容

Xml代碼 ?

1. <? xml ? version = "1.0" ? encoding = "UTF-8" ?> ??
2. < plant > ??
3. ???? < phylum > ??
4. ???????? < name > 被子植物門 </ name > ??
5. ???????? < clazz > ??
6. ???????????? < name > 雙子葉植物綱 </ name > ??
7. ???????????? < order > ??
8. ???????????????? < name > 菊目 </ name > ??
9. ???????????????? < family > ??
10. ???????????????????? < name > 菊科 </ name > ??
11. ???????????????????? < genus > 菊屬 </ genus > ??
12. ???????????????? </ family > ??
13. ???????????????? < family > ??
14. ???????????????????? < name > 桔梗科 </ name > ??
15. ???????????????????? < genus > 同鐘花屬 </ genus > ??
16. ???????????????????? < genus > 刺萼參屬 </ genus > ??
17. ???????????????? </ family > ??
18. ???????????? </ order > ??
19. ???????????? < order > ??
20. ???????????????? < name > 胡椒目 </ name > ??
21. ???????????????? < family > ??
22. ???????????????????? < name > 胡椒科 </ name > ??
23. ???????????????????? < genus > 胡椒屬 </ genus > ??
24. ???????????????????? < genus > 草胡椒屬 </ genus > ??
25. ???????????????????? < genus > 齊頭絨屬 </ genus > ??
26. ???????????????? </ family > ??
27. ???????????? </ order > ??
28. ???????? </ clazz > ??
29. ???? </ phylum > ??
30. ???? < phylum > ??
31. ???????? < name > 蕨類植物門 </ name > ??
32. ???????? < clazz > ??
33. ???????????? < name > 石松綱 </ name > ??
34. ???????????? < order > ??
35. ???????????????? < name > 石松目 </ name > ??
36. ???????????????? < family > ??
37. ???????????????????? < name > 石松科 </ name > ??
38. ???????????????????? < genus > 石松屬 </ genus > ??
39. ???????????????? </ family > ??
40. ???????????? </ order > ??
41. ???????? </ clazz > ??
42. ???? </ phylum > ??
43. </ plant > ??

這是部分效果圖：













可以實現上下級下拉框的聯動，支持無序選擇，若向上重新選擇，下下層下拉框將自動被禁用，下層下拉框選項也會相應改變。


有一點不足是，因為數據量實在太大，這樣5個下拉框仍然可能出現某下拉框有幾百甚至幾千個選項，此時就失去了下拉框的意義，因此正在考慮是否應該做成輸入框的形式，或者像搜索引擎那樣帶有輸入提示功能，研究中，歡迎拍磚。

PS：重新修改了一下，可以支持FireFox了，這可真是麻煩的工程：FireFox的JavaScript的Element對象中沒有 selectNodes()方法，只有調用childNodes()或者getElementsByTagName()；并且在FireFox中，xml 中節點對應childNodes()的索引是1,3,5,7...，也就是說，如果你想讀取xml某個節點下的第i個子節點，正常我們就會寫 someNode.childNodes[i-1]，但在FireFox就必須寫作someNode.childNodes[i*2-1]。
另外在使用數組時，IE允許把小括號當成中括號使用（即someArray[i]和someArray(i)均合法），FireFox則不行，所以最好統一寫someArray[i]。

js實現xml的多級聯動下拉框