廢話少說，直接看代碼：
由於大家用的數據庫五花八門，我就用幾個數組來代替rs，在實際應用中只要把實時查詢的結果集rs替換掉數據就可以了。
我這裏採用了一個ajax的框架：DWR，這個是把java代碼影射成js的一個工具。
index.htm
- <html>
- <script src="/dwrajax/dwr/interface/ItemsBean.js"></script>
- <script src="/dwrajax/dwr/engine.js"></script>
- <script src="/dwrajax/dwr/util.js"></script>
- <script language="javascript">
- function update1()
- {
- ItemsBean.ClassList(createList1);
- }
- function createList1(data)
- {
- DWRUtil.removeAllOptions("classid");
- DWRUtil.addOptions("classid", data);
- }
- function update2()
- {
- ItemsBean.UserList(createList2,DWRUtil.getValue("classid"));
- }
- function createList2(data)
- {
- DWRUtil.removeAllOptions("userid");
- DWRUtil.addOptions("userid", data);
- }
- </script>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>班級和學生Ajax級聯下拉菜單</title>
- </head>
- <body οnlοad="update1()">
- <form name="formform">
- 班級<select name="classid" id="classid" οnchange="javascript:update2();"></select>
- 學生<select name="userid" id="userid"></select>
- </form>
- </body>
- </html>
ItemsBean.java
- package org.baiyun;
- import java.util.*;
- /**
- *
- * @author baiyun
- */
- public class ItemsBean {
- private String[] class1 = {"同學1","同學2","同學3","同學4","同學5","同學6"};
- private String[] class2 = {"同學7","同學8","同學9","同學10"};
- private String[] class3 = {"同學11","同學12","同學13","同學14","同學15","同學16","同學17"};
- private String[] class4 = {"同學18","同學19","同學20"};
- private String[] class5 = {"同學21","同學22","同學23","同學24","同學25","同學26"};
- /** Creates a new instance of ItemsBean */
- public ItemsBean() {
- }
- public Map ClassList() {
- Map reply = new LinkedHashMap();
- reply.put("0", "所有");
- reply.put("1", "班級1");
- reply.put("2", "班級2");
- reply.put("3", "班級3");
- reply.put("4", "班級4");
- reply.put("5", "班級5");
- return reply;
- }
- public Map UserList(String CLASSID) {
- Map reply = new LinkedHashMap();
- reply.put("0", "所有");
- // 這裏用數組模擬數據庫查詢結果。
- // 真實環境中，你只要將數據庫查詢結果放入到reply裏面就可以了。
- // reply的id就是返回後下拉框的option的value，reply的value就是返回後下拉框的option的text。
- // 如: sql = "select * from users where classid=?";
- if(CLASSID==null || CLASSID.equals("") || CLASSID.equals("0")){
- //
- }else if(CLASSID.equals("1")){
- int id =1;
- for(int i=0;i<class1.length;i++){
- reply.put(""+id, class1[i]);
- id++;
- }
- }else if(CLASSID.equals("2")){
- int id =1;
- for(int i=0;i<class2.length;i++){
- reply.put(""+id, class2[i]);
- id++;
- }
- }else if(CLASSID.equals("3")){
- int id =1;
- for(int i=0;i<class3.length;i++){
- reply.put(""+id, class3[i]);
- id++;
- }
- }else if(CLASSID.equals("4")){
- int id =1;
- for(int i=0;i<class4.length;i++){
- reply.put(""+id, class4[i]);
- id++;
- }
- }else if(CLASSID.equals("5")){
- int id =1;
- for(int i=0;i<class5.length;i++){
- reply.put(""+id, class5[i]);
- id++;
- }
- }
- return reply;
- }
- }
web.xml
- <?xml version="1.0" encoding="UTF-8"?>
- <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
- <web-app>
- <servlet>
- <servlet-name>dwr-invoker</servlet-name>
- <display-name>DWR Servlet</display-name>
- <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
- <init-param>
- <param-name>debug</param-name>
- <param-value>true</param-value>
- </init-param>
- </servlet>
- <servlet-mapping>
- <servlet-name>dwr-invoker</servlet-name>
- <url-pattern>/dwr/*</url-pattern>
- </servlet-mapping>
- <welcome-file-list>
- <welcome-file>index.htm</welcome-file>
- </welcome-file-list>
- </web-app>
dwr.xml: 是讓js和java直接通訊，很神奇吧~ 這就是dwr的貢獻。
- <?xml version="1.0" encoding="gbk"?>
- <!DOCTYPE dwr PUBLIC
- "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
- "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
- <dwr>
- <allow>
- <create creator="new" javascript="ItemsBean">
- <param name="class" value="org.baiyun.ItemsBean"/>
- </create>
- </allow>
- </dwr>
就這麼簡單，運行以下試試看吧~。
若要實現3級、4級、5級...的下拉菜單，只要以此類推一級級延下去就可以了，也很簡單的。
直接把附件解壓放到Tomcat/webapps下可以直接運行。附件：dwrajax.zip(295K)
上面這個多級聯動下拉菜單只是Ajax的一個很小的應用，我現在的項目裏大量使用了Ajax，可以像Gmail一樣查詢、翻頁等等都不用刷新整個頁面，用戶操作感覺非常好。