ajax级联菜单实例

vipshichg · 发表于 2013-1-23 02:46:05

页面
<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>

		自动登录	找回密码
密码			立即注册