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

最新推荐文章于 2024-04-20 03:19:45 发布

danning

最新推荐文章于 2024-04-20 03:19:45 发布

阅读量2.9k

点赞数

文章标签： ajax class javascript string dwr 数据库

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

废话少说，直接看代码：
由于大家用的数据库五花八门，我就用几个数组来代替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一样查询、翻页等等都不用刷新整个页面，用户操作感觉非常好。

danning

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于Ajax的二级联动下拉菜单

很多朋友在做多级联动下拉菜单时都碰到了问题，Google上能找到的大部分也是基于javascript数组的实现，超多3级联动时，就会很复杂，甚至出现4维、5维的数组。这里介绍一个Ajax的方法，也是页面无刷新的，但是是从数据库实时查询的,在数据量大时较js数组的方法性能要好很多，实现起来也方便。废话少说，直接看代码：由于大家用的数据库五花八门，我就用几个数组来代替rs，在实际应用中只要把实时查询的
复制链接

扫一扫