纯JSP+DWR实现三级联动下拉选择菜单
网上看到一些例子，对于一个简单的三级联动，都加上什么Struts,
Hibernate诸如此类的框架。这个Ajax联动殊不知和这些框架有什么
关系，一个小Demo干嘛整得那么大。
今天我做了一个dwr+jsp做的例子。
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> </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:<?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> <!-- 没有它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:
<%@ page language="java" import="java.util.*,com.vo.*"
pageEncoding="GBK"%><%@ taglib uri="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查询所属省或州 function queryProvince()
{ var countryId = $("country").value; //默认为不选择 if(countryId == 0) { ${"province"}.options.length=0; ${"city"}.options.length=0;
} else { menu.queryProvinceById(countryId,provinceCallback); } } //根据国家id查询所属省或州的回调函数 function provinceCallback(provinces) { ${"province"}.options.length=0; //每次获得新的数据的时候先把每二个下拉框架的长度清0 for(var i=0;i< provinces.length;i ++){ var value = provinces[i].id; var text = provinces[i].provinceName; var option = new Option(text, value); //根据每组value和text标记的值创建一个option对象 try{ $("province").add(option);//将option对象添加到第二个下拉框中 }catch(e){ } } //同时关联第三级 var provinceId = ${"province"}.value; menu.queryCityById(provinceId,cityCallback); } //查询所属城市 function queryCity() { var provinceId = $("province").value; menu.queryCityById(provinceId,cityCallback); } //查询所属城市回调函数 function cityCallback(citys) { //每次获得新的数据的时候先把每三个下拉框架的长度清0 ${"city"}.options.length=0; for(var i=0;i< citys.length;i ++){ var value = citys[i].id; var text = citys[i].cityName; var option = new Option(text, value); //根据每组value和text标记的值创建一个option对象 try{ $("city").add(option);//将option对象添加到第三个下拉框中 }catch(e){ } } } function change1() { queryProvince(); } function change2() { 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") List list = (List) request.getAttribute("countrys"); for (int i = 0; i < list.size(); i++) { Country temp = (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就不帖了，想了解的可以去下载源码。点此下载