本文介绍了一种使用DWR（Direct Web Remoting）技术实现级联选择框的方法。通过两个下拉列表，当第一个列表（部门）选项改变时，会触发远程调用，更新第二个列表（员工）的内容。该实现涉及后端服务接口的调用，包括获取所有部门信息及根据所选部门获取员工信息。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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>级 联 特 效</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type='text/javascript'
src='/AjaxT7-SSHDwr/dwr/interface/deptService.js'></script>
<script type='text/javascript'
src='/AjaxT7-SSHDwr/dwr/interface/employeeService.js'></script>
<script type='text/javascript' src='/AjaxT7-SSHDwr/dwr/engine.js'></script>
<script type='text/javascript' src='/AjaxT7-SSHDwr/dwr/util.js'></script>
<script type='text/javascript'>
function getAllDepts() {
deptService.getAllDepts(showDepts);
}
function showDepts(depts) {
DWRUtil.removeAllOptions("deptId");
DWRUtil.addOptions("deptId", depts);
}
function selectDept() {
employeeService.getAllEmployeesByDeptId(DWRUtil.getValue("deptId"),
showEmps);
}
function showEmps(emps) {
DWRUtil.removeAllOptions("empId");
DWRUtil.addOptions("empId", emps);
}
</script>
</head>
<body onload="getAllDepts()">
<form name="myForm">
部门：
<select name="deptId" id="deptId" onchange="javascript:selectDept();"></select>
员工：
<select name="empId" id="empId">
<option>
请选择部门
</option>
</select>
</form>
</body>
</html>
<?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> <create creator="spring" javascript="userService"> <param name="beanName" value="userServiceBean" /> <include method="login"></include> <include method="checkUserName"></include> </create> <create creator="spring" javascript="moduleService"> <param name="beanName" value="moduleServiceBean" /> <include method="getAllModules"></include> </create> <create creator="spring" javascript="deptService"> <param name="beanName" value="deptServiceBean" /> <include method="getAllDepts"></include> </create> <create creator="spring" javascript="employeeService"> <param name="beanName" value="employeeServiceBean" /> <include method="getAllEmployeesByDeptId"></include> </create> <convert match="com.tudou.ssh.entity.Employee" converter="bean"></convert> <convert match="com.tudou.ssh.entity.Dept" converter="bean"></convert> <convert match="com.tudou.ssh.entity.User" converter="bean"></convert> <convert match="com.tudou.ssh.entity.Module" converter="bean"></convert> </allow> </dwr>
<?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> <create creator="spring" javascript="userService"> <param name="beanName" value="userServiceBean" /> <include method="login"></include> <include method="checkUserName"></include> </create> <create creator="spring" javascript="moduleService"> <param name="beanName" value="moduleServiceBean" /> <include method="getAllModules"></include> </create> <create creator="spring" javascript="deptService"> <param name="beanName" value="deptServiceBean" /> <include method="getAllDepts"></include> </create> <create creator="spring" javascript="employeeService"> <param name="beanName" value="employeeServiceBean" /> <include method="getAllEmployeesByDeptId"></include> </create> <convert match="com.tudou.ssh.entity.Employee" converter="bean"></convert> <convert match="com.tudou.ssh.entity.Dept" converter="bean"></convert> <convert match="com.tudou.ssh.entity.User" converter="bean"></convert> <convert match="com.tudou.ssh.entity.Module" converter="bean"></convert> </allow> </dwr>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
