利用Dwr实现二级菜单联动效果
先贴出数据填充的代码
public class PersonManager {
private static Map orgs = new HashMap();
private static Map persons = new HashMap();
static{
for(int i=0; i<10; i++){
Org org = new Org();
org.setId(i);
org.setName("机构"+i);
orgs.put(org.getId(), org);
List personList = new ArrayList();
for(int j=0; j<20; j++){
Person person = new Person();
person.setId(j);
person.setName("org["+org.getName()+"]下的人员[人员"+j+"]");
personList.add(person);
}
persons.put(org.getId(), personList);
}
}
public Collection searchAllOrg(){
return orgs.values();
}
public List searchPersons(int orgId){
return (List)persons.get(orgId);
}
}
机构和人员实体类：
public class Org {
private int id;
private String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
public class Person{
private int id;
private String name;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
dwr.xml文件：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="personManager">
<param name="class" value="com.bjsxt.dwr.PersonManager"/>
</create>
<!--DWR帮助我们将本地的javascript脚本函数调用转变成对远程java对象函数的调用。
在函数的调用过程中我们需要传递参数，这样我们就需要将本地的javascript变量转变成对应的
java类型变量。这个就是Convertor的作用。 -->
<convert converter="bean" match="com.bjsxt.dwr.Person"/>
<convert converter="bean" match="com.bjsxt.dwr.Org"/>
</allow>
</dwr>
展现页面：
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/personManager.js"></script>
<script type="text/javascript">
function init(){
personManager.searchAllOrg(
function(data){
// [{"id":xx,"name":xx},{"id":xxx,"name":xxx},{}]
dwr.util.addOptions("o",data,"id","name");
searchPersons();
}
);
}
function searchPersons(){
personManager.searchPersons(
$("o").value,
function(data){
dwr.util.removeAllOptions("p");//一定要加上这个方法 ，否则会在后面追加
dwr.util.addOptions("p",data,"id","name");
}
);
}
</script>
</head>
<body onload="init()">
请选择机构：<select id="o" onchange="searchPersons()"></select> <br>
请选择人员：<select id="p"></select>
</body>
</html>
分享到：
相关推荐
在项目“dwrsqlmysql”中，通过整合Spring、Hibernate、Ajax、DWR等技术，实现了高效的二级菜单联动功能。这不仅提升了用户体验，还优化了数据处理流程，展现了现代Web开发的强大能力。通过深入理解各组件的作用和...
本示例主要展示了如何使用纯JSP和Direct Web Remoting (DWR)技术来构建一个功能丰富的用户界面，其中包括三级联动下拉选择菜单、无刷新联动、用户存在性判断以及模拟Google搜索效果的功能。DWR是一种JavaScript库，...
在IT行业中，"四级联动"通常指的是在一个网页应用中，四个下拉菜单或者选择框之间存在依赖关系，当用户在一级菜单中选择一个选项时，二级菜单会根据一级的选择自动更新其可选内容，以此类推，直到第四级。...
5. **编写JavaScript**：在前端，使用DWR的API监听一级下拉菜单的change事件，当用户选择一项时，通过DWR调用后台服务获取二级菜单数据，并更新二级下拉菜单。 6. **视图（View）**：使用HTML和CSS创建下拉菜单，...
本篇主要讨论如何利用SSH框架和DWR来实现省市二级联动效果。 省市二级联动通常是指在一个下拉菜单选择省份后，另一个下拉菜单会动态加载对应的市一级的数据。这种功能在很多网站的地址填写环节中常见，它可以提高...
使用dwr做的二级联动菜单，不会出现DWRUtil未定义的问题。不使用DWRUtil实现，依赖dwr.xml中的配置的实体实现二级联动。数据库采用mysql，字段简单可根据自己的情况建立数据库，根据pojo中的类建立表，然后把util...
3. **Struts2的二级联动**：Struts2框架提供了内置的二级联动支持，但效率相对较低，且不适用于更复杂的多级联动需求。因此，开发者通常会寻找其他解决方案，如DWR，来提高性能和用户体验。 4. **DWR（Direct Web ...
在这个“ajaxdwr select二级联动”的场景中，我们将讨论如何利用这两种技术实现下拉菜单的级联选择效果。 Ajax是一种在无需刷新整个页面的情况下，能够更新部分网页的技术。它通过JavaScript发送异步请求到服务器，...
在Java中，我们需要创建两个方法，分别对应二级联动和三级联动。`getSecondSort`方法接收商品大类的ID作为参数，返回一个映射，该映射的键值对表示商品小类的ID和名称。`getBrand`方法类似，但接收商品小类的ID，...
在本案例中，"三级联动代码 DWR"指的是使用DWR来实现一个具有三级关联的下拉菜单，当用户在一级菜单中选择一项时，二级菜单会自动更新，然后根据二级菜单的选择，三级菜单也会动态改变。这种方式可以提升用户体验，...
**二级联动菜单** 是指在Web界面上，当用户选择一级菜单时，对应的二级菜单会根据一级菜单的选择动态加载数据。这种设计常见于地区选择、产品分类等场景，能有效减少页面刷新，提高用户体验。 在本项目中，我们利用...
在网页设计中，联动菜单意味着当用户选择某个菜单项时，下一级菜单会根据所选项动态加载，这种效果可以递归到多级菜单，提供良好的用户体验。 首先，我们需要了解DWR的基本原理。DWR的核心功能是能够在浏览器中直接...
在登录系统中，二级联动通常指的是下拉菜单或选择框的选择项之间存在依赖关系，即当用户选择一级菜单时，二级菜单会根据一级菜单的选项自动更新。这种功能可以通过Ajax实现，当用户在登录界面选择地区时，国家和城市...
在不刷新整个页面的情况下，通过Ajax（异步JavaScript和XML）技术，用户选择一级菜单后，二级菜单会根据一级菜单的选择动态加载相关数据，提供更加流畅的用户体验。 【描述】：这个项目是为初学者设计的，旨在教授...
总结来说，本示例展示了如何利用DWR和JSP实现一个三级联动下拉菜单，提供了对数据库数据的动态加载和显示，这在构建交互式Web应用时非常有用。这种方法避免了使用复杂框架的过度工程，只使用了必要的组件，适合小型...
5. 同样的过程应用于二级菜单到三级菜单的联动。 项目中的"dwrt+struts三级级联菜单"可能包含了以下文件： - `struts-config.xml`: Struts框架的配置文件，定义了Action和ActionForm。 - `dwr.xml`: DWR的配置文件...
2. **JavaScript逻辑**：使用DWR提供的API，当用户在一级菜单中选择一个选项时，发送Ajax请求到服务器，服务器查询相应的二级菜单数据并返回。同样的逻辑应用到二级菜单，选择后触发请求获取三级菜单数据。 3. **...
这种效果通常用于下拉菜单或者选择框，当用户在一级菜单中做出选择时，二级菜单会动态更新，接着选择二级菜单后，三级菜单也会相应地动态加载数据，提供用户更加直观便捷的交互体验。 【描述】中的"一个简单的web...
在IT行业中，二级联动是一种常见的前端交互设计，它通常出现在如选择省份后自动填充城市的下拉菜单中。这种功能能够提升用户体验，减少用户输入错误，提高数据录入的效率。而"类似Google的输入下拉提示"则是指搜索...