很多朋友在做多级联动下拉菜单时都碰到了问题,Google上能找到的大部分也是基于javascript数组的实现,超多3级联动时,就会很复杂,甚至出现4维、5维的数组。这里介绍一个Ajax的方法,也是页面无刷新的,但是是从数据库实时查询的,在数据量大时较js数组的方法性能要好很多,实现起来也方便。
废话少说,直接看代码:
由于大家用的数据库五花八门,我就用几个数组来代替rs,在实际应用中只要把实时查询的结果集rs替换掉数据就可以了。
我这里采用了一个ajax的框架:DWR,这个是把java代码影射成js的一个工具。
index.htm
ItemsBean.java
web.xml
dwr.xml: 是让js和java直接通讯,很神奇吧~ 这就是dwr的贡献。
就这么简单,运行以下试试看吧~。
若要实现3级、4级、5级...的下拉菜单,只要以此类推一级级延下去就可以了,也很简单的。
直接把附件解压放到Tomcat/webapps下可以直接运行。 附件:dwrajax.zip(295K)
上面这个多级联动下拉菜单只是Ajax的一个很小的应用,我现在的项目里大量使用了Ajax,可以像Gmail一样查询、翻页等等都不用刷新整个页面,用户操作感觉非常好。
废话少说,直接看代码:
由于大家用的数据库五花八门,我就用几个数组来代替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一样查询、翻页等等都不用刷新整个页面,用户操作感觉非常好。