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代码
//本菜单是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>

你可能感兴趣的:(java,jquery,xml,Ajax,框架)