<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'a.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type='text/javascript' src='<%=path%>/dwr/util.js'>
</script>
<script type="text/javascript">
var strArr=['请选择一本图书','疯狂Java讲义','疯狂Ajax讲义','疯狂XML讲义'];
var strArr1=[{name:'疯狂Java讲义'},{name:'疯狂Ajax讲义',name:'疯狂XML讲义'}];
var strArr2=[{book:'疯狂Java讲义',price:'99'},{book:'疯狂Ajax讲义',price:'79'},{book:'疯狂XML讲义',price:'69'}];
var strArr3={name:"疯狂Java讲义",price:"99",publish:"电子工业出版社"};
var objMap={first:{book:'疯狂Java讲义',price:'99'},
second:{book:'疯狂Ajax讲义',price:'79'},
third:{book:'疯狂XML讲义',price:'69'},
fourth:{book:'轻量级Java EE企业应用实战',price:'89'},
fifth:{book:'经典Java EE企业应用实战',price:'89'}
};
function add(){
dwr.util.addOptions("test",strArr);
}
function del(){
dwr.util.removeAllOptions("test");
}
function add1(){
dwr.util.addOptions("test1",strArr1,'name');
}
function del1(){
dwr.util.removeAllOptions("test1");
}
function add2(){
dwr.util.addOptions("test2",strArr2,'book','price');
}
function del2(){
dwr.util.removeAllOptions("test2");
}
function add3(){
dwr.util.addOptions("test3",strArr3);
}
function del3(){
dwr.util.removeAllOptions("test3");
}
function add4(){
dwr.util.addOptions("test4",objMap,'price','book');
}
function del4(){
dwr.util.removeAllOptions("test4");
}
function init(){
dwr.util.useLoadingMessage("123");
}
</script>
</head>
<body onload="init()">
<select id="test"></select>
<input type="button" value="添加选项" onclick="add()">
<input type="button" value="删除选项" onclick="del()">
<br>
<select id="test1"></select>
<input type="button" value="添加选项" onclick="add1()">
<input type="button" value="删除选项" onclick="del1()">
<br>
<select id="test2"></select>
<input type="button" value="添加选项" onclick="add2()">
<input type="button" value="删除选项" onclick="del2()">
<br>
使用对象添加选项:
<select id="test3"></select>
<input type="button" value="添加选项" onclick="add3()">
<input type="button" value="删除选项" onclick="del3()">
<br>
使用对象添加选项:
<select id="test4"></select>
<input type="button" value="添加选项" onclick="add4()">
<input type="button" value="删除选项" onclick="del4()">
</body>
</html>
分享到：
相关推荐
在这个"**dwr下拉联动的例子**"中，我们关注的是如何利用DWR来实现下拉菜单的联动效果，即在一个下拉框的选择改变时，根据所选值动态更新另一个下拉框的内容。 在传统的Web应用中，这种联动通常需要通过页面刷新...
在我们的例子中，DWR将用于处理树形菜单的动态操作，如添加、删除和移动节点。我们可以通过在服务器端定义一个Java接口，然后在JavaScript中通过DWR调用这些接口方法，实现对树形菜单数据的修改。 实现步骤如下： ...
1. HTML部分：HTML文件通常会定义级联菜单的结构，包括两个或多个下拉列表。每个列表都与DWR关联，当一个列表的值改变时，通过DWR触发事件来更新其他列表。 2. JavaScript部分：DWR的核心在于其JavaScript库。在这...
HTML元素如select或option将用于创建下拉列表，CSS用于美化这些元素。 5. **JSON数据格式**：在前后端通信中，数据通常以JSON格式传输，因为JSON轻量且易于解析。后端返回的省、市、县数据会被转换为JSON对象，供...
然后，利用DWR生成的JavaScript接口，初始化页面时调用`getProvinces()`填充省的下拉列表。当用户选择一个省后，通过JavaScript事件监听器触发调用`getCitiesByProvinceId()`，并传入选中的省ID，更新市的下拉列表。...
数据库通常用于存储下拉列表的数据，当AJAX请求触发时，DWR会调用Java方法查询数据库并返回结果。 3. **DWR介绍PPT**：这个PowerPoint演示文稿可能是对DWR框架的详细介绍，包括其工作原理、如何集成到项目中、核心...
当用户在下拉列表中选择一个省之后，通过DWR调用Java后端方法，传入选中的省份id，Java方法查询对应市的信息，并返回给前端，前端动态更新市的下拉列表。同理，选择市后，再调用Java方法获取对应县的信息，更新县...
在“dwr城市选择的联动”中，通常会有一个下拉列表用来选择省份，当用户选择一个省份后，通过DWR调用服务器端的Java方法，获取该省份下的所有城市，并更新城市选择的下拉列表。这个过程中，`util.js` 文件起到了关键...
通过解压并运行这个例子，开发者可以学习如何使用DWR来实现更丰富的交互式Web应用，理解如何进行前后端的数据交换，以及如何处理用户操作和数据更新。 总的来说，DWR是实现动态Web应用的一个强大工具，它可以简化...
3. **页面组件的异步加载**：例如分页、下拉列表的动态填充等。 4. **复杂业务逻辑的处理**：JavaScript处理不了的复杂逻辑可以交给服务器处理。 **DWR教程**通常会涵盖以下几个方面： 1. **环境配置**：包括在...
前端页面通过AJAX请求DWR，DWR再调用后台的Java方法获取数据并返回，更新DOM以显示选择的下拉列表项。 总结来说，Struts、Spring和Hibernate用于处理业务逻辑和数据持久化，DWR则负责在前端与后端之间建立通信桥梁...
在这个案例中，Ajax用于在用户选择省份时向服务器发送请求，获取对应的市级数据，然后更新市的下拉列表，同理适用于选择市后的区级数据。 3. **数据库操作**：为了获取三级联动的数据，需要有一个存储省、市、区...
在HTML中，我们需要创建三个下拉列表，分别对应国家、省份和城市，并且通过JavaScript事件监听器与DWR接口交互，以更新下拉列表的内容。 在JavaScript中，我们可能会有一个函数，例如`updateProvinces`，当用户在...
DWR API 提供了一系列的方法来方便开发者进行数据的传递、UI操作等。 1. `DWRUtil` 是DWR提供的一个实用工具类，包含了多种用于操作DOM元素和数据的方法。例如： - `DWRUtil.selectRange("selectRangeBasic", 5, ...
这个实例提供了一个完整的解决方案，对于初学者来说，是一个很好的学习资源，可以帮助他们理解DWR、Struts以及数据库操作在实际项目中的应用。同时，对于有经验的开发者，这个实例也是一个快速搭建类似功能的起点。...
在城市联动的场景中，用户选择省份时，Struts2可以接收请求，调用相应的Action方法，更新省份数据，并根据省份选择的结果决定显示哪些城市的下拉列表。 Spring框架则在业务层提供支持，它可以管理对象的生命周期，...
三级联动通常指的是在三个下拉列表中，用户在一个列表中做出选择后，第二个列表会根据第一个选择自动填充，然后在第二个列表选择后，第三个列表也会相应更新。这种方式常用于地区选择、分类筛选等场景，提高了用户...
在Java Web开发中，省市级联下拉菜单是一种常见的需求，它允许用户在选择省份后自动更新城市下拉菜单，展示对应省份的城市列表。这个实例代码主要涉及的技术点包括Servlet、JSON处理以及简单的数据模拟。 1. **...
这种效果通常用于下拉菜单或者选择框，当用户在一级菜单中做出选择时，二级菜单会动态更新，接着选择二级菜单后，三级菜单也会相应地动态加载数据，提供用户更加直观便捷的交互体验。 【描述】中的"一个简单的web...