<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        

    
	
    
		
			

    

    我的漫漫程序之旅
    

    專注于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 々上善若水々 閱讀(4707) 評論(2)  編輯  收藏  所屬分類: AJAX 
		
    
	
    
	
	


	


    
	    
    


    

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

    





    








    

				
			
    
		    		
	
    
	
    
		
			

		
	
    

    


    







    
        
	



主站蜘蛛池模板：
亚洲av永久无码制服河南实里|
亚洲真人无码永久在线观看|
最近的中文字幕大全免费8|
亚洲精品不卡视频|
亚洲AV无码一区二区三区系列|
免费A级毛片av无码|
亚洲国产系列一区二区三区|
yy6080久久亚洲精品|
久久国产精品国产自线拍免费|
亚洲一区二区三区91|
久久久久亚洲AV成人网人人网站|
性xxxx视频免费播放直播|
亚洲AV一区二区三区四区|
精品亚洲综合久久中文字幕|
无码视频免费一区二三区|
WWW免费视频在线观看播放|
亚洲1234区乱码|
亚洲综合无码AV一区二区
|
亚洲精品无码久久久久APP
|
heyzo亚洲精品日韩|
最近高清中文字幕免费|
真人无码作爱免费视频|
亚洲高清免费在线观看|
亚洲女人被黑人巨大进入|
在线看片v免费观看视频777|
国产精品免费久久久久影院|
中文字幕乱码亚洲精品一区|
亚洲av网址在线观看|
亚洲а∨天堂久久精品|
国产一精品一AV一免费孕妇|
免费无码又爽又刺激高潮软件
|
国产在线a免费观看|
中文字幕免费在线视频|
亚洲国产成人精品女人久久久
|
久久亚洲精品中文字幕三区|
日日夜夜精品免费视频|
亚洲人成免费电影|
国产麻豆一精品一AV一免费|
男女作爱免费网站|
亚洲国产综合AV在线观看|
亚洲精品NV久久久久久久久久|