我的漫漫程序之旅
          

          專注于JavaWeb開發
          

          

          

          隨筆 - 39, 文章 - 310, 評論 - 411, 引用 - 0
          

          


          		
	
          

          

          
	
          
		
			
          
				數據加載中……
			
          
		          		
		
			
          
				
					
	
          
		
          
			純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就不帖了，想了解的可以去下載源碼。點此下載


          



          
                                
                                
                                
          

		
          
		
          
			posted on 2008-05-29 11:59 々上善若水々 閱讀(4702) 評論(2)  編輯  收藏  所屬分類: AJAX 
		
          
	
          
	
	


	


          
	    
    


          

          評論
          
	
	
			
          
				
          
					# re: 純JSP+DWR實現三級聯動下拉選擇菜單[未登錄]  回復  更多評論
					  
				
          
				強~下來學習學習。
				
          
					2008-05-30 17:47 | 草兒
				
          
			
          
		
			
          
				
          
					# re: 純JSP+DWR實現三級聯動下拉選擇菜單  回復  更多評論
					  
				
          
				這么下載不了源碼啊
				
          
					2010-01-21 16:48 | 王利
				
          
			
          
		

          





          








          

				
			
          
		          		
	
          
	
          
		
			

		
	
          

          


    







          
        
	




主站蜘蛛池模板：
和龙市|
淮阳县|
永川市|
淳安县|
扶余县|
汉沽区|
南江县|
南丰县|
宁化县|
郁南县|
简阳市|
辽宁省|
贵阳市|
濮阳市|
博客|
苏尼特左旗|
北川|
崇礼县|
石楼县|
德安县|
沙河市|
凤翔县|
沁阳市|
鸡西市|
文山县|
利辛县|
若尔盖县|
通城县|
彰武县|
剑阁县|
贺兰县|
文登市|
类乌齐县|
云霄县|
广昌县|
商城县|
大邑县|
灵山县|
资中县|
台山市|
靖远县|