我用DWR做了一个级联选择的例子,希望能给你带来方便,谢谢!!!
web.xml----------
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<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>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>
initApplicationScopeCreatorsAtStartup
</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>maxWaitAfterWrite</param-name>
<param-value>500</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
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>
<convert converter="bean" match="com.dwr.CityBean"></convert>
<create creator="new" javascript="DWRHandle"
class="com.dwr.DwrHandle" scope="session">
<include method="getCityList" />
<include method="getProvinceList" />
</create>
<!--
<create creator="spring" javascript="DWRCategory">
<param name="beanName" value="DWRCategory"/>
</create>
-->
</allow>
</dwr>
hand.js-------------
//handle author ddh
function _load(){
DWRHandle.getProvinceList(loadCall);
}
//callback
function loadCall(data)
{
if(data)
{
var selects="<select id='province' οnchange='showCity()'><option id='0' >省份</option>";
for(var i=0;i<data.length;i++)
{
selects=selects+"<option id='"+data[i].id+"'>"+data[i].name+"</option>";
}
selects=selects+"</select>";
//DWRUtil.setValue("proninceDiv",selects,true);
document.getElementById("proninceDiv").innerHTML=selects;
}
}
function showCity()
{
var provs=document.getElementById("province");
for(i=0;i<provs.options.length;i++)
{
if(provs.options[i].selected){
//alert(provs.options[i].id);
if(provs.options[i].id!=0){
DWRHandle.getCityList(provs.options[i].id,showCityCall);
}
}
}
}
//callback
function showCityCall(data)
{
if(data)
{
var selects="<select id='city' οnchange='getCity()'><option id='0' >城市</option>";
for(var i=0;i<data.length;i++)
{
selects=selects+"<option id='"+data[i].id+"'>"+data[i].name+"</option>";
}
selects=selects+"</select>";
document.getElementById("cityDiv").innerHTML=selects;
}
}
function getCity()
{
var citys=document.getElementById("city");
for(i=0;i<citys.options.length;i++)
{
if(citys.options[i].selected){
alert(citys.options[i].innerHTML);
}
}
}
index.jsp-------------
<%@ 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>cascade 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">
-->
<!-- import js -- author ddh -->
<script type='text/javascript' src='/CascadeofDWR/dwr/interface/DWRHandle.js'></script>
<script type='text/javascript' src='/CascadeofDWR/dwr/engine.js'></script>
<script type='text/javascript' src='/CascadeofDWR/dwr/util.js'></script>
<script type='text/javascript' src='js/handle.js'></script>
</head>
<body οnlοad="_load();">
Welcome to here! <br>
<br/>
<table>
<tr><td> <div id="proninceDiv"></div></td><td><div id="cityDiv" /></td></tr>
</table>
</body>
</html>
其详细资料请看附件,谢谢。