级联下拉表单的做法有很多种，如jquery ajax，dwr等。
现在我介绍下用dwr的做法。
实现目标：
两级地域下拉表单
A B
A中有三个选项：全部，北京，上海
当A选全部时，B中出现全部
当A选北京时，B中出现全部，朝阳区，海淀区
当A选上海时，B中出现全部，浦东区，普坨区
1、下载dwr-2.0.rc1.jar，放入WEB-INIF/lib，附件中有。
2、在web.xml中加入
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>crossDomainSessionSecurity</param-name>
<param-value>false</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
我加在struts的filter之后
3、新建Area类，地域对象
package com.my.dwr;
/**
*
* @author 锅巴
* @date 2011-3-6
* @description
*/
public class Area {
private String name;
private int code;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
}
4、新建AreaService对象，业务对象
package com.my.dwr;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
*
* @author 锅巴
* @date 2011-3-6
* @description
*/
public class AreaService {
private Map<Integer,List<Area>> areaMap = null;
private List<Area> parentAreas = null;
public AreaService(){
areaMap = new HashMap<Integer, List<Area>>();
parentAreas = new ArrayList<Area>();
Area area = new Area();
area.setCode(-1);
area.setName("全部");
Area area0 = new Area();
area0.setCode(1);
area0.setName("北京");
Area area1 = new Area();
area1.setCode(2);
area1.setName("上海");
Area area0_0 = new Area();
area0_0.setCode(-1);
area0_0.setName("全部");
Area area0_1 = new Area();
area0_1.setCode(3);
area0_1.setName("朝阳区");
Area area0_2 = new Area();
area0_2.setCode(4);
area0_2.setName("海淀区");
Area area1_0 = new Area();
area1_0.setCode(-1);
area1_0.setName("全部");
Area area1_1 = new Area();
area1_1.setCode(5);
area1_1.setName("浦东区");
Area area1_2 = new Area();
area1_2.setCode(6);
area1_2.setName("普坨区");
parentAreas.add(area);
parentAreas.add(area0);
parentAreas.add(area1);
List<Area> areas = new ArrayList<Area>();
areas.add(area);
areaMap.put(-1, areas);
List<Area> area0s = new ArrayList<Area>();
area0s.add(area0_0);
area0s.add(area0_1);
area0s.add(area0_2);
areaMap.put(1, area0s);
List<Area> area1s = new ArrayList<Area>();
area1s.add(area1_0);
area1s.add(area1_1);
area1s.add(area1_2);
areaMap.put(2, area1s);
}
public List<Area> getAreasByParentId(int areaId){
return areaMap.get(areaId);
}
public List<Area> getParentAreas(){
return parentAreas;
}
}
5、在WEB-INF/中新建dwr.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<!-- 从spring ioc 中获取 -->
<create creator="spring" javascript="JAreaSelect">
<param name="beanName" value="areaService" />
<!-- 可以指定暴露的方法
<include method="Register" />
-->
</create>
<!-- 直接生成一个实例
<create creator="new" javascript="JAreaSelect">
<param name="class" value="com.my.dwr.AreaService" />
</create>
-->
<!-- 将area转成json -->
<convert converter="bean" match="com.my.dwr.Area">
<!--
可以指定要输出的属性
<param name="include" value="storeId,fullName,city,address,phoneURL,photoURL,DetailURL,posx,posy,discount,discountnotes"/>
-->
</convert>
</allow>
</dwr>
6、新建dwr.jsp页面，
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isErrorPage="true"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="parentArea" onchange="changeParentArea();return false;">
<s:iterator value="parentAreas">
<option value="<s:property value='code'/>"><s:property
value="name" /></option>
</s:iterator>
</select>
<select id="childArea">
<option value="-1">全部</option>
</select>
<script language=javascript>
function changeParentArea() {
var the_index = $("parentArea").selectedIndex;
var the_selected = $("parentArea").options[the_index];
JAreaSelect.getAreasByParentId(the_selected.value,
changeParentAreaCallback);
}
function changeParentAreaCallback(childs) {
var selectName = document.getElementById("childArea");
selectName.options.length = 0;
for ( var j = 0; j < childs.length; j++) {
area = childs[j];
selectName.options[j] = new Option(area.name, area.code);
}
}
</script>
<!-- dwr 引入的 文件 -->
<script type='text/javascript' src='/dwr/interface/JAreaSelect.js'></script>
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type="text/javascript" src="/dwr/util.js">
</script>
</body>
</html>
7、建一个action导向该jsp，url为：/common/dwr.html
package com.my.action;
import java.util.List;
import com.my.dwr.Area;
import com.my.dwr.AreaService;
import com.opensymphony.xwork2.ActionSupport;
/**
*
* @author 锅巴
* @date 2011-3-6
* @description
*/
public class Dwr extends ActionSupport{
/**
*
*/
private static final long serialVersionUID = 1L;
private AreaService areaService;
private List<Area> parentAreas;
@Override
public String execute() throws Exception {
// TODO Auto-generated method stub
parentAreas = areaService.getParentAreas();
return SUCCESS;
}
public List<Area> getParentAreas() {
return parentAreas;
}
public void setAreaService(AreaService areaService) {
this.areaService = areaService;
}
}
可以访问/common/dwr.html了，试试下拉的效果
分享到：
相关推荐
在"ssh+dwr 3级联"的场景中，可能是指在一个项目中，使用SSH作为后端服务的安全访问层，DWR作为前后端交互的技术，而“3级联”可能指的是三层架构，即表示层（Presentation Layer）、业务逻辑层（Business Logic ...
AJAX-DWR下拉框级联是Web开发中一种常见的交互设计，主要用于提高用户体验，使得用户在选择某个选项时，相关联的下拉框能够自动更新其内容，以适应不同的场景需求。在这个实验中，我们将重点探讨如何使用AJAX和DWR...
总结，DWR、Hibernate 和 Spring 结合使用可以方便地实现级联下拉列表框，提供流畅的用户体验。通过 DWR 实现前后端的实时通信，利用 Hibernate 进行数据操作，借助 Spring 管理业务逻辑和数据访问，从而构建出高效...
结合上述描述，我们可以看出提供的PDF参考书可能详细介绍了如何使用DWR来实现级联菜单的步骤，包括但不限于以下内容： 1. **环境搭建**：介绍如何配置DWR框架，包括添加依赖、配置DWR的Context.xml和web.xml文件，...
在这个项目中，我们关注的是如何利用DWR实现一个三级联动的下拉菜单。这种交互式菜单在用户界面设计中常见，用于在多个选项之间建立关联，如省份-城市-区县的选择，以提供更加精细化的筛选。 首先，我们需要理解DWR...
这个demo演示了使用DWR框架配合数据库来做的下拉列表级联。dao层采用了jsp中经典的JDBC封装、单例、属性文件等技术。数据文件可以按照我的entity层里面写的代码创建就可以了。这个文件直接导入你的工程在属性文件中...
在"**dwr的小小运用实现下拉列表**"这个主题中，我们关注的是如何利用DWR来创建和更新页面上的级联下拉列表。级联下拉通常用于需要关联数据的情况，例如国家/地区和城市的选择，其中选择一个国家后，下拉列表会自动...
这个例子“dwr例子演示级联菜单”旨在帮助我们理解如何使用DWR来创建动态的、交互式的级联下拉菜单。级联菜单常用于Web应用程序中，例如在选择国家时自动更新相应的省份列表。 首先，让我们了解一下DWR的基本工作...
级联通常用于数据表单中，如地区选择，省份改变时城市会随之更新，城市改变时区县也会相应变化。这种功能在很多实际应用场景中都非常常见，如地址管理、部门组织结构等。 首先，我们需要了解DWR的基本概念。DWR允许...
#### 如何使用DWR实现下拉菜单 1. **配置DWR环境** - 首先确保项目中已经正确配置了DWR环境，包括导入DWR相关的jar包、配置web.xml和dwr.xml等。 - 在前端页面中引入DWR的JavaScript库。 2. **编写服务器端逻辑*...
5. **更新下拉菜单**：当服务器返回新数据后，使用DWR的`DWRUtil.removeAllOptions`清除现有选项，再用`DWRUtil.addOptions`添加新数据到下拉菜单。这样，菜单就能实时更新了。 6. **错误处理**：别忘了处理可能...
在这个特定的场景中，我们利用Ajax技术和Direct Web Remoting（DWR）框架来创建一个动态的省份城市级联菜单。这个功能能够提升用户体验，因为它减少了用户手动刷新页面的需求，提供了流畅的交互。 首先，我们需要...
本篇文章将深入探讨如何利用DWR来实现一个两级级联菜单，并以SQL Server 2000数据库作为数据源。 首先，我们需要理解DWR的基本工作原理。DWR允许在后台执行Java方法并返回结果到前端，无需刷新整个页面。这种技术...
在这个场景中，“SSH + dwr 实现三级级联”指的是使用SSH框架与DWR技术结合，来实现前端页面中的多级联动下拉框功能。 首先，让我们详细了解一下SSH框架： 1. **Struts**：这是一个基于MVC（Model-View-Controller...
要使用DWR，你需要在项目中配置DWR的Servlet，并在Java类中添加可被远程调用的方法。 对于数据库部分，这里选择了SQL Server 2000。在实现级联菜单时，通常需要三个表：一个存储顶级分类，另一个存储子分类，第三个...
在本例中，我们将讨论如何利用DWR2版本创建一个联动下拉菜单，这是一种常见的级联选择功能，常见于数据输入表单中，如地址选择，省-市-区的逐级筛选。 首先，我们需要在服务器端设置DWR引擎。这包括创建一个`dwr....
在“dwr实现select列表的动态级联”这个场景中，DWR将被用来实现在前端JavaScript和后端Java之间的数据同步，以便在用户选择上级选项时动态更新下级选项列表。以下是实现这个功能的关键步骤： 1. **设置DWR配置**：...
标题 "dwr省市区三级级联" 涉及到的是一个前端开发中的常见问题，即如何实现省市区的三级联动效果。这个标题暗示我们这是一个使用Direct Web Remoting (DWR) 技术来实现的功能，它允许JavaScript与服务器端Java代码...
SSH (Struts2 + Spring + Hibernate) 和 DWR (Direct Web Remoting) 是两种常见的Java Web开发技术。在本文中，我们将深入探讨如何将这两种技术结合，实现一个三级联动的效果。 SSH是Java企业级开发中广泛应用的一...
标题 "Dwr 表单提交 时间类型" 涉及的是Direct Web Remoting (DWR)框架中的一个关键概念，即如何处理表单提交时的时间数据类型。DWR是一种允许JavaScript与服务器端Java代码进行交互的技术，使得Web应用能够实现动态...