基于Ajax的二级联动下拉菜单

很多朋友在做多级联动下拉菜单时都碰到了问题，Google上能找到的大部分也是基于javascript数组的实现，超多3级联动时，就会很复杂，甚至出现4维、5维的数组。这里介绍一个Ajax的方法，也是页面无刷新的，但是是从数据库实时查询的,在数据量大时较js数组的方法性能要好很多，实现起来也方便。

废话少说，直接看代码：
由于大家用的数据库五花八门，我就用几个数组来代替rs，在实际应用中只要把实时查询的结果集rs替换掉数据就可以了。

我这里采用了一个ajax的框架：DWR，这个是把java代码影射成js的一个工具。

index.htm

1. <html>
2.  
3. <script src="/dwrajax/dwr/interface/ItemsBean.js"></script>
4. <script src="/dwrajax/dwr/engine.js"></script>
5. <script src="/dwrajax/dwr/util.js"></script>
6.  
7. <script language="javascript"> 
8. function update1()
9. {
10.        ItemsBean.ClassList(createList1);
11. }
12. function createList1(data)
13. {
14.     DWRUtil.removeAllOptions("classid");
15.     DWRUtil.addOptions("classid", data);
16. }
17.  
18. function update2()
19. {
20.        ItemsBean.UserList(createList2,DWRUtil.getValue("classid"));
21. }
22. function createList2(data)
23. {
24.     DWRUtil.removeAllOptions("userid");
25.     DWRUtil.addOptions("userid", data);
26. }
27. </script>
28.  
29. <head>
30. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
31. <title>班级和学生Ajax级联下拉菜单</title>
32. </head>
33.  
34. <body onload="update1()">
35.  
36. <form name="formform">
37.     班级<select name="classid" id="classid" onchange="javascript:update2();"></select> 
38.     学生<select name="userid" id="userid"></select>
39. </form>
40.  
41. </body>
42.  
43. </html>

ItemsBean.java

1. package org.baiyun;
2.  
3. import java.util.*;
4. /**
5.  *
6.  * @author baiyun
7.  */
8. public class ItemsBean {
9.     private String[] class1 = {"同学1","同学2","同学3","同学4","同学5","同学6"};
10.     private String[] class2 = {"同学7","同学8","同学9","同学10"};
11.     private String[] class3 = {"同学11","同学12","同学13","同学14","同学15","同学16","同学17"};
12.     private String[] class4 = {"同学18","同学19","同学20"};
13.     private String[] class5 = {"同学21","同学22","同学23","同学24","同学25","同学26"};
14.     /** Creates a new instance of ItemsBean */
15.     public ItemsBean() {
16.     }
17.     
18.     public Map ClassList() {
19.         Map reply = new LinkedHashMap();
20.         reply.put("0", "所有");
21.         reply.put("1", "班级1");
22.         reply.put("2", "班级2");
23.         reply.put("3", "班级3");
24.         reply.put("4", "班级4");
25.         reply.put("5", "班级5");
26.         return reply;
27.     }
28.     
29.     public Map UserList(String CLASSID) {
30.         Map reply = new LinkedHashMap();
31.         reply.put("0", "所有");
32.         
33.         // 这里用数组模拟数据库查询结果。
34.         // 真实环境中，你只要将数据库查询结果放入到reply里面就可以了。
35.         // reply的id就是返回后下拉框的option的value，reply的value就是返回后下拉框的option的text。
36.         // 如: sql = "select * from users where classid=?";
37.         if(CLASSID==null || CLASSID.equals("") || CLASSID.equals("0")){
38.             //
39.         }else if(CLASSID.equals("1")){
40.             int id =1;
41.             for(int i=0;i<class1.length;i++){
42.                 reply.put(""+id, class1[i]);
43.                 id++;
44.             }
45.         }else if(CLASSID.equals("2")){
46.             int id =1;
47.             for(int i=0;i<class2.length;i++){
48.                 reply.put(""+id, class2[i]);
49.                 id++;
50.             }
51.         }else if(CLASSID.equals("3")){
52.             int id =1;
53.             for(int i=0;i<class3.length;i++){
54.                 reply.put(""+id, class3[i]);
55.                 id++;
56.             }
57.         }else if(CLASSID.equals("4")){
58.             int id =1;
59.             for(int i=0;i<class4.length;i++){
60.                 reply.put(""+id, class4[i]);
61.                 id++;
62.             }
63.         }else if(CLASSID.equals("5")){
64.             int id =1;
65.             for(int i=0;i<class5.length;i++){
66.                 reply.put(""+id, class5[i]);
67.                 id++;
68.             }
69.         }
70.         
71.         return reply;
72.     }
73. }

web.xml

1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
3.  
4. <web-app>
5.   <servlet>
6.     <servlet-name>dwr-invoker</servlet-name>
7.     <display-name>DWR Servlet</display-name>
8.     <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
9.     <init-param>
10.       <param-name>debug</param-name>
11.       <param-value>true</param-value>
12.     </init-param>
13.   </servlet>
14.   <servlet-mapping>
15.     <servlet-name>dwr-invoker</servlet-name>
16.     <url-pattern>/dwr/*</url-pattern>
17.   </servlet-mapping>
18.  
19.   <welcome-file-list>
20.     <welcome-file>index.htm</welcome-file>
21.   </welcome-file-list>
22. </web-app>

dwr.xml: 是让js和java直接通讯，很神奇吧~ 这就是dwr的贡献。

1. <?xml version="1.0" encoding="gbk"?>
2. <!DOCTYPE dwr PUBLIC
3.     "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
4.     "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
5.  
6. <dwr>
7.   <allow>
8.     <create creator="new" javascript="ItemsBean">
9.       <param name="class" value="org.baiyun.ItemsBean"/>
10.     </create>
11.  
12.   </allow>
13. </dwr>

就这么简单，运行以下试试看吧~。
若要实现3级、4级、5级...的下拉菜单，只要以此类推一级级延下去就可以了，也很简单的。

直接把附件解压放到Tomcat/webapps下可以直接运行。 附件：dwrajax.zip(295K) 
上面这个多级联动下拉菜单只是Ajax的一个很小的应用，我现在的项目里大量使用了Ajax，可以像Gmail一样查询、翻页等等都不用刷新整个页面，用户操作感觉非常好。