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;//ajax动作提交的对象（后台采用java程序）var postUrl = 'pubOrgAjax.do';//如果本菜单是最后一级菜单的话则不做任何动作if(orgLevel=='taxOffical') return true;//本级菜单选择为全部选项，则下级菜单也置为全部if(this.value == ''){ var firstOption = nextMenu.option; 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.value == ''){ var firstOption = nextMenu.options.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).text(),$('code',dicts).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>
页:
[1]