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

 

纯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就不帖了，想了解的可以去下载源码。 点此下载