<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 閱讀(9844) 評論(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∨亚洲AV电影| 亚洲中文字幕AV在天堂| 高清免费久久午夜精品| 亚洲AV永久无码精品一区二区国产| 亚洲精品无码专区久久| 国产在线ts人妖免费视频| 精品亚洲av无码一区二区柚蜜| 宅男666在线永久免费观看| 国产精品亚洲一区二区三区| 免费看国产精品麻豆| caoporm碰最新免费公开视频 | 女人18一级毛片免费观看| 久久精品国产亚洲av麻豆图片| 在线视频免费观看高清| 亚洲国产精品无码久久98| 免费国产美女爽到喷出水来视频| 色爽黄1000部免费软件下载| 国产亚洲AV手机在线观看| 久久午夜无码免费| 亚洲ts人妖网站| 亚洲?V无码成人精品区日韩| 中文字幕日本人妻久久久免费| 亚洲精品视频在线免费| 免费无码又爽又刺激高潮的视频| 猫咪www免费人成网站| 亚洲精品自产拍在线观看| 6080午夜一级毛片免费看6080夜福利| 亚洲av无码电影网| 免费日本黄色网址| 免费精品一区二区三区第35 | www国产亚洲精品久久久日本| 久久久久久噜噜精品免费直播 | 国产伦精品一区二区三区免费下载 | 成人av片无码免费天天看| 亚洲一区中文字幕久久| 精品国产麻豆免费网站| 国产免费无码一区二区| 亚洲色偷偷偷综合网| 国产AV无码专区亚洲精品| 四色在线精品免费观看| a级毛片毛片免费观看久潮喷|