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

2013-01-28

纯JSP+DWR实现三级联动下拉选择菜单网上看到一些例子，对于一个简单的三级联动，都加上什么Struts,Hibernate

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

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

web.xml:
纯JSP+DWR实现三级联动上拉选择菜单 <?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">
纯JSP+DWR实现三级联动上拉选择菜单     <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>
            org.directwebremoting.servlet.DwrServlet
        </servlet-class>
        <init-param>
            <param-name>debug</param-name>
纯JSP+DWR实现三级联动上拉选择菜单             <param-value>true</param-value>
        </init-param>
    </servlet>
  <servlet>
    <servlet-name>SelectServlet</servlet-name>
    <servlet-class>com.action.SelectServlet</servlet-class>
  </servlet>

    <servlet-mapping>
纯JSP+DWR实现三级联动上拉选择菜单         <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>
纯JSP+DWR实现三级联动上拉选择菜单
    <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">
纯JSP+DWR实现三级联动上拉选择菜单
<dwr>

    
    <allow>
        <create creator="new" javascript="menu">
            <param name="class" value="com.dao.CountryDAO" />
        </create>
        
纯JSP+DWR实现三级联动上拉选择菜单          <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.*"
纯JSP+DWR实现三级联动上拉选择菜单     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>
纯JSP+DWR实现三级联动上拉选择菜单         <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">
纯JSP+DWR实现三级联动上拉选择菜单     //根据国家id查询所属省或州
    function queryProvince()
    {
        var countryId = $("country").value;
        //默认为不选择
        if(countryId == 0)
        {
            ${"province"}.options.length=0;
纯JSP+DWR实现三级联动上拉选择菜单             ${"city"}.options.length=0;
        }
        else
        {
            menu.queryProvinceById(countryId,provinceCallback);
        }
    }
    //根据国家id查询所属省或州的回调函数
纯JSP+DWR实现三级联动上拉选择菜单     function provinceCallback(provinces)
    {
      ${"province"}.options.length=0;
      //每次获得新的数据的时候先把每二个下拉框架的长度清0
      for(var i=0;i< provinces.length;i ++){
        var value = provinces[i].id;
纯JSP+DWR实现三级联动上拉选择菜单         var text = provinces[i].provinceName;
        var option = new Option(text, value);
        //根据每组value和text标记的值创建一个option对象
        try{
          $("province").add(option);//将option对象添加到第二个下拉框中
纯JSP+DWR实现三级联动上拉选择菜单         }catch(e){
        }
      }
      //同时关联第三级
      var provinceId = ${"province"}.value;
      menu.queryCityById(provinceId,cityCallback);
    }
    //查询所属城市
    function queryCity()
纯JSP+DWR实现三级联动上拉选择菜单     {
        var provinceId = $("province").value;
        menu.queryCityById(provinceId,cityCallback);
    }
    //查询所属城市回调函数
    function cityCallback(citys)
    {
      //每次获得新的数据的时候先把每三个下拉框架的长度清0
纯JSP+DWR实现三级联动上拉选择菜单       ${"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对象
纯JSP+DWR实现三级联动上拉选择菜单         try{
          $("city").add(option);//将option对象添加到第三个下拉框中
        }catch(e){
        }
      }
    }

    function change1()
    {
        queryProvince();
纯JSP+DWR实现三级联动上拉选择菜单     }

    function change2()
    {
        queryCity();
    }
</script>
        <div align="center">
            <h3>
                <br>
            </h3>
            <h3>
纯JSP+DWR实现三级联动上拉选择菜单                 DWR三级联动演示
            </h3>
            
            <select id="country" onchange="change1();">
                <option selected="selected" value="0">
纯JSP+DWR实现三级联动上拉选择菜单                     请选择
                </option>
                <%
                    @SuppressWarnings("unchecked")
                    List list = (List) request.getAttribute("countrys");
纯JSP+DWR实现三级联动上拉选择菜单                     for (int i = 0; i < list.size(); i++)
                    {
                        Country temp = (Country) list.get(i);
                %>
                <option value="<%=temp.getId()%>"><%=temp.getCountryName()%></option>
纯JSP+DWR实现三级联动上拉选择菜单                 <%
                    }
                %>
            </select>

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

            </select>

纯JSP+DWR实现三级联动上拉选择菜单
            <select id="city">
            </select>
        </div>
    </body>
</html>

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

热点排行

JavaScript

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