纯JSP+DWR实现三级联动下拉选择菜单

网上看到一些例子，对于一个简单的三级联动，都加上什么Struts,
Hibernate诸如此类的框架。这个Ajax联动殊不知和这些框架有什么
关系，一个小Demo干嘛整得那么大。

今天我做了一个dwr+jsp做的例子。

web.xml:

<? xmlversion="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 >
</ servlet >
< servlet >
< servlet-name > SelectServlet </ servlet-name >
< servlet-class > com.action.SelectServlet </ servlet-class >
</ servlet >

< servlet-mapping >
< servlet-name > dwr-invoker </ servlet-name >
< url-pattern > /dwr/* </ url-pattern >
</ servlet-mapping >
< servlet-mapping >
< servlet-name > SelectServlet </ servlet-name >
< url-pattern > /select </ url-pattern >
</ servlet-mapping >

< welcome-file-list >
< welcome-file > index.jsp </ welcome-file >
</ welcome-file-list >
</ web-app >

dwr.xml:

<? xmlversion="1.0"encoding="UTF-8" ?>
<! DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting
2.0//EN""http://www.getahead.ltd.uk/dwr/dwr20.dtd" >

< dwr >

<!-- 没有它DWR什么也做不了 -->
< allow >
< create creator ="new" javascript ="menu" >
< param name ="class" value ="com.dao.CountryDAO" />
</ create >
<!-- 要转换的Bean -->
< convert converter ="bean" match ="com.vo.Country" />
< convert converter ="bean" match ="com.vo.Province" />
< convert converter ="bean" match ="com.vo.City" />
</ allow >
</ dwr >

test.jsp:

<% @pagelanguage="java"import="java.util.*,com.vo.*"
pageEncoding="GBK" %>
<% @tagliburi="http://java.sun.com/jstl/core"prefix="c" %>
< html >
< head >
< title > DWR三级联动 </ title >
< script type ='text/javascript'
src ='/mutiplyMenu/dwr/interface/menu.js' ></ script >
< script type ='text/javascript' src ='/mutiplyMenu/dwr/engine.js' ></ script >
< script type ='text/javascript' src ='/mutiplyMenu/dwr/util.js' ></ script >
</ head >

< body >
< script type ="text/javascript" >
//根据国家id查询所属省或州
functionqueryProvince()
{
varcountryId=$("country").value;
//默认为不选择
if(countryId==0)
{
${"province"}.options.length=0;
${"city"}.options.length=0;
}
else
{
menu.queryProvinceById(countryId,provinceCallback);
}
}
//根据国家id查询所属省或州的回调函数
functionprovinceCallback(provinces)
{
${"province"}.options.length=0;
//每次获得新的数据的时候先把每二个下拉框架的长度清0
for(vari=0;i<provinces.length;i++){
varvalue=provinces[i].id;
vartext=provinces[i].provinceName;
varoption=newOption(text,value);
//根据每组value和text标记的值创建一个option对象
try{
$("province").add(option);//将option对象添加到第二个下拉框中
}catch(e){
}
}
//同时关联第三级
varprovinceId=${"province"}.value;
menu.queryCityById(provinceId,cityCallback);
}
//查询所属城市
functionqueryCity()
{
varprovinceId=$("province").value;
menu.queryCityById(provinceId,cityCallback);
}
//查询所属城市回调函数
functioncityCallback(citys)
{
//每次获得新的数据的时候先把每三个下拉框架的长度清0
${"city"}.options.length=0;
for(vari=0;i<citys.length;i++){
varvalue=citys[i].id;
vartext=citys[i].cityName;
varoption=newOption(text,value);
//根据每组value和text标记的值创建一个option对象
try{
$("city").add(option);//将option对象添加到第三个下拉框中
}catch(e){
}
}
}

functionchange1()
{
queryProvince();
}

functionchange2()
{
queryCity();
}
</ script >
< div align ="center" >
< h3 >
< br >
</ h3 >
< h3 >
DWR三级联动演示
</ h3 >
<!-- 我都奇怪了，我的<c>标签在这里不能用 -->
< select id ="country" onchange ="change1();" >
< option selected ="selected" value ="0" >
请选择
</ option >
<%
@SuppressWarnings("unchecked")
Listlist=(List)request.getAttribute("countrys");
for(inti=0;i<list.size();i++)
{
Countrytemp=(Country)list.get(i);
%>
< option value ="<%=temp.getId()%>" > <% = temp.getCountryName() %> </ option >
<%
}
%>
</ select >

< select id ="province" onchange ="change2();" >

</ select >


< select id ="city" >
</ select >
</ div >
</ body >
</ html >

servlet,dao就不帖了，想了解的可以去下载源码。 点此下载