@OverWrite BlogJava
          
				
          
			          		
		
          
	
          

          

          
	
          
		
          
			
 
BlogJava ::
首頁 ::
新隨筆 ::
聯系 ::
聚合
 ::
管理 ::


			
			
				

          
	
          
		
          
			
			
			
				 
				128 
				隨筆 ::
				0 文章
				::
				29 評論
				::
				0 Trackbacks
			
		
          
	
          

          

			          		
		
          
	
          

          


          


          
	
					

          
	
	
	
          
		不說廢話了，直接看代碼：
          
頁面：
          

          <html>
          
          <head>
          
          <script type='text/javascript' src='jquery.js'></script>
          
          <script type='text/javascript'>
          
          //js代碼1
          
          <script>
          

          
          <body>
          
          <table>
          
           <tr>
          
            <td>級聯菜單</td>
          
            <td>
          
              <select name='city' class='amenu'>
          
               <option value=''>-市局全部-</option>
          
               <option value='1'>a市</option>
          
               <option value='2'>b市</option>
          
               <option value='3'>c市</option>
          
              </select>
          
            </td>
          
            <td>
          
              <select name='country' class='amenu'>
          
               <option value=''>-縣局全部-</option>
          
               <option value='1'>test</option>
          
              </select>
          
            </td>
          
            <td>
          
              <select name='taxOffice' class='amenu'>
          
               <option value=''>-所全部-</option>
          
               <option value='1'>test</option>    
          
              </select>
          
            </td>
          
            <td>
          
              <select name='taxOffical' class='amenu'>
          
               <option value=''>-職員全部-</option>
          
               <option value='1'>test</option>    
          
              </select>
          
            </td>
          
           </tr>
          
          </table>
          
          </body>
          

          
對應的js代碼：
          
js代碼1：
          

          //本菜單是4級級聯菜單，采用jquery框架來實現
          
          $(document).ready(function(){
          
           //為所有class為amenu的元素綁定onchange事件
          
           $('.amenu').change(function(){
          
            //記錄本級菜單標志
          
            var orgLevel = this.name;
          
            //下級菜單
          
            var nextMenu = $(this).parents().next().children[0];
          
            //ajax動作提交的對象（后臺采用java程序）
          
            var postUrl = 'pubOrgAjax.do';
          

          
            //如果本菜單是最后一級菜單的話則不做任何動作
          
            if(orgLevel=='taxOffical') return true;
          
            //本級菜單選擇為全部選項，則下級菜單也置為全部
          
            if(this.value == ''){
          
             var firstOption = nextMenu.option[0];
          
   nextMenu.length          =0;
          
   nextMenu.options.add(firstOption);
          
             return true;
          
  }
          

          
            //ajax動作
          
            $.post(postUrl,{orgFlag:orgLevel,orgCode:this.value},function(xml){
          
              var dicts = $('dict',xml);
          
              if(dicts.length<1){alert('返回數據錯誤，請重新登陸');return false;}
          
              //清空nextMenu
          
              if(nextMenu.options[0].value == ''){
          
                var firstOption = nextMenu.options[0].text;
          
      nextMenu.length           = 0;
          
      nextMenu.options.add(          new Option(firstOption,''));
          
    }          else{
          
      nextMenu.length           = 0;
          
    }
          
              //為清空后的nextMenu填充新值
          
              for(var i=0;i<dicts.length;i++){
          
                var newOption = new Option($('name',dicts[i]).text(),$('code',dicts[i]).text());
          
      nextMenu.options.add(newOption);
          
    }
          
    
          
  }          );
          
  
          
 }          );
          
}          );
          

          
后臺返回的數據格式：
          

          <?xml version="1.0" cencodeing="gbk"?>
          
          <ajax-response>
          
          <response>
          
           <dict>
          
              <code>1</code>
          
              <name>市局1</name>
          
           </dict>
          
           <dict>
          
 
          
           </dict>
          

          
 
          
          </response>
          
          </ajax-respnse>
          

          


	
          
	
	
          
		posted on 2008-06-12 09:44 vesung 閱讀(9848) 評論(5)  編輯  收藏  所屬分類: Java 、Ajax/html 
	
          

          







          
	    
    


          

          
	
          評論
          
		
		
				
          			
					
          
						# re: ajax級聯菜單實例
							
								2008-08-19 23:10
							
						Yvon
					
          
					
          
						謝謝博主的分享，正在學習中  回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: ajax級聯菜單實例
							
								2008-10-13 10:07
							
						qbc
					
          
					
          
						你好！能發個完整版給我嗎？弄不懂這段代碼！  回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: ajax級聯菜單實例
							
								2008-10-13 10:10
							
						qbc
					
          
					
          
						@qbc

          我的郵箱是yan-zi-2@163.com   回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: ajax級聯菜單實例
							
								2011-11-16 12:38
							
						張哲
					
          
					
          
						給我也 來一份  完整的  我看看   983291942@qq.com  回復  更多評論
						
          
						  
					
          
				
          
				
          
			
				
          			
					
          
						# re: ajax級聯菜單實例
							
								2013-05-22 18:33
							
						倒薩
					
          
					
          
						大撒旦  回復  更多評論
						
          
						  
					
          
				
          
				
          
			

          




          








          

				

          




    







          
        
	




主站蜘蛛池模板：
临潭县|
泸州市|
康定县|
秀山|
伊金霍洛旗|
葵青区|
北票市|
霞浦县|
桂林市|
河津市|
辽源市|
砀山县|
舒城县|
林口县|
五寨县|
峨山|
庆阳市|
西安市|
荥经县|
南陵县|
根河市|
伊宁县|
义马市|
夏津县|
玛多县|
长岛县|
河间市|
宾川县|
汤原县|
弥勒县|
萍乡市|
尼木县|
都安|
金华市|
湖南省|
榆树市|
浦江县|
宁化县|
潮州市|
临沂市|
高唐县|