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


	


    
	    
    


    

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

    





    








    

				
			
    
		    		
	
    
	
    
		
			

		
	
    

    


    







    
        
	



主站蜘蛛池模板：
亚洲熟女综合色一区二区三区|
伊人久久大香线蕉亚洲|
最新仑乱免费视频|
毛片免费观看网站|
性做久久久久免费看|
四虎国产精品免费视|
好男人视频社区精品免费|
嫩草影院在线免费观看|
美女视频黄的全免费视频网站|
午夜宅男在线永久免费观看网|
好吊妞在线新免费视频|
免费人成激情视频|
精品亚洲一区二区三区在线观看
|
中文字幕在线视频免费观看|
免费在线黄色电影|
久久综合给合久久国产免费|
思思re热免费精品视频66|
最近的免费中文字幕视频|
99精品热线在线观看免费视频|
国产精品色拉拉免费看|
国产精品免费播放|
九月丁香婷婷亚洲综合色|
亚洲va在线va天堂成人|
一级**爱片免费视频|
182tv免费视视频线路一二三|
国产精品久久久久久久久久免费|
亚洲美女在线国产|
亚洲国产高清在线精品一区|
爱情岛论坛免费视频|
最近中文字幕高清免费中文字幕mv
|
成人免费无码大片A毛片抽搐
|
日韩亚洲欧洲在线com91tv|
亚洲午夜在线播放|
成人精品视频99在线观看免费|
青青青国产在线观看免费网站
|
亚洲成AV人片在线播放无码|
亚洲一日韩欧美中文字幕在线|
91在线免费视频|
在线观看免费精品国产|
久久久久亚洲AV无码观看|
青青视频观看免费99|