ajax 四级级联菜单（jquery实现）

页面：
＜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＞

更多相关文章

随机推荐