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

最新推荐文章于 2025-09-09 22:18:29 发布

原创最新推荐文章于 2025-09-09 22:18:29 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dwr #ajax #class #javascript #string #function

本文介绍一种使用Ajax实现实时多级联动下拉菜单的方法，通过DWR框架简化了Java与JavaScript间的交互，提高了数据量大时的性能。

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

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

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

index.htm

<html>

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>

<title>班级和学生Ajax级联下拉菜单</title>

</head>

班级<select name="classid" id="classid" onchange="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-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>

</allow>

</dwr>

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