很多朋友在做多级联动下拉菜单时都碰到了问题,Google上能找到的大部分也是基于javascript数组的实现,超多3级联动时,就会很复杂,甚至出现4维、5维的数组。这里介绍一个Ajax的方法,也是页面无刷新的,但是是从数据库实时查询的,在数据量大时较js数组的方法性能要好很多,实现起来也方便。
废话少说,直接看代码:
由于大家用的数据库五花八门,我就用几个数组来代替rs,在实际应用中只要把实时查询的结果集rs替换掉数据就可以了。
我这里采用了一个ajax的框架:DWR,这个是把java代码影射成js的一个工具。
index.htm
<
html
>
< script src ="/dwr/dwr/interface/ItemsBean.js" ></ script >
< script src ="/dwr/dwr/engine.js" ></ script >
< script src ="/dwr/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(DWRUtil.getValue("classid"),createList2);
}
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 onload ="update1()" >
< form name ="formform" >
班级 < select name ="classid" id ="classid" onchange ="javascript:update2();" ></ select >
学生 < select name ="userid" id ="userid" ></ select >
</ form >
</ body >
</ html >
< script src ="/dwr/dwr/interface/ItemsBean.js" ></ script >
< script src ="/dwr/dwr/engine.js" ></ script >
< script src ="/dwr/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(DWRUtil.getValue("classid"),createList2);
}
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 onload ="update1()" >
< form name ="formform" >
班级 < select name ="classid" id ="classid" onchange ="javascript:update2();" ></ select >
学生 < select name ="userid" id ="userid" ></ select >
</ form >
</ body >
</ html >
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;
}
}
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;
}
}
<?
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 >
<! 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 >
<! 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级...的下拉菜单,只要以此类推一级级延下去就可以了,也很简单的。
注意:需要加dwr.jat xalan.jar