@OverWrite BlogJava
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  128 随笔 :: 0 文章 :: 29 评论 :: 0 Trackbacks
ajax级联菜单实例
不说废话了，直接看代码：
页面：
<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 阅读(9818) 评论(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 倒萨
大撒旦  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: