<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 閱讀(9840) 評論(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 倒薩
    大撒旦  回復  更多評論
      

    主站蜘蛛池模板: 好爽…又高潮了毛片免费看| 国产免费牲交视频免费播放| 亚欧免费视频一区二区三区| 亚洲av无码国产精品夜色午夜 | 一级成人a免费视频| 国产精品自在自线免费观看| 亚洲国产欧美一区二区三区| 青青草国产免费久久久下载| 久久综合亚洲色HEZYO国产| jizz免费观看| 香蕉视频在线观看亚洲| 亚洲高清免费在线观看| 亚洲丰满熟女一区二区v| 毛片在线免费视频| 亚洲精品久久久久无码AV片软件| 91在线品视觉盛宴免费| 亚洲精品无码专区在线播放| 国产在线ts人妖免费视频| 一级毛片a免费播放王色电影| 亚洲男同帅GAY片在线观看| 久久久久免费看黄a级试看| 亚洲短视频在线观看| 成年18网站免费视频网站| 亚洲一区精品中文字幕| 国内精品免费麻豆网站91麻豆| 亚洲性无码一区二区三区| mm1313亚洲国产精品美女| 99re6在线精品免费观看| 免费国内精品久久久久影院| 国产99久久久久久免费看| 亚洲va久久久噜噜噜久久男同 | 精品国产免费一区二区三区香蕉| 久久精品国产亚洲夜色AV网站| 99久久99久久精品免费看蜜桃| 亚洲国产日韩a在线播放| 亚洲国产精品无码专区在线观看 | 日韩国产精品亚洲а∨天堂免| 国产福利视精品永久免费| 亚洲av乱码中文一区二区三区| 狠狠亚洲婷婷综合色香五月排名| 亚洲视频免费一区|