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

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

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

    @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 閱讀(9842) 評論(5)  編輯  收藏 所屬分類: JavaAjax/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 倒薩
    大撒旦  回復  更多評論
      

    主站蜘蛛池模板: 伊人婷婷综合缴情亚洲五月| 免费看美女被靠到爽| 亚洲精品国精品久久99热一| 永久免费无码网站在线观看个| 日韩在线免费播放| 立即播放免费毛片一级| 亚洲AV永久无码精品一区二区国产 | 亚洲国产综合在线| 2021在线永久免费视频| 亚洲一级免费视频| 女人让男人免费桶爽30分钟| 亚洲欧美国产国产一区二区三区| 国产成人免费高清在线观看 | 一级毛片视频免费| 国产亚洲精品a在线观看| 两性色午夜免费视频| 久久亚洲精品中文字幕三区| 久久久免费精品re6| 亚洲AV无码精品蜜桃| 国产一区在线观看免费| 一区二区三区免费精品视频| 国产亚洲av片在线观看16女人| 免费国产99久久久香蕉| 亚洲国产综合第一精品小说| 韩国日本好看电影免费看| 一级毛片免费视频网站| 亚洲AV成人精品网站在线播放| 7723日本高清完整版免费| 无码色偷偷亚洲国内自拍| 久久99国产亚洲高清观看首页| 88xx成人永久免费观看| 亚洲欧美第一成人网站7777| 亚洲中文字幕无码一区 | 免费福利电影在线观看| 亚洲一级高清在线中文字幕| 全黄性性激高免费视频| 中文字幕免费观看| 免费国产va在线观看| 2022年亚洲午夜一区二区福利 | 韩国日本好看电影免费看| a毛片全部免费播放|