怎样用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> |
