ajax 四级级联菜单(jquery实现)
来源:互联网 发布:免费群发短信的软件 编辑:程序博客网 时间:2024/04/29 00:56
页面:
<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>
<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>
- ajax 四级级联菜单(jquery实现)
- jQuery+java实现四级级联菜单
- 利用php+jQuery+ajax实现汽车车型四级联动下拉菜单
- 四级联动,级联菜单,Ajax
- jquery blockUI ajax级联菜单
- 利用了jquery的ajax实现二级联互动菜单
- Ajax + Asp实现级联菜单
- Ajax + Asp实现级联菜单
- ajax级联菜单的实现
- AJAX实现二级级联菜单
- jdbc+ajax实现级联菜单
- ajax实现的级联菜单
- ajax实现级联下拉菜单
- jquery用ajax实现级联
- Jquery Ajax 提交 级联实现
- JQuery 中利用$.ajax()方法做的四级级联
- jQuery实现级联菜单(仿淘宝首页)
- 用 PHPRPC 实现 Ajax 级联下拉菜单
- ffmpeg开发指南
- uboot1.3.4的编译过程
- c#调用API函数拖动无标题窗口及控件
- Linux系统学习笔记
- LUN Mapping和ZONE
- ajax 四级级联菜单(jquery实现)
- WinCE BSP中的Dirs文件和Sources文件
- GridView突出显示某一单元格(例如金额低于多少,分数不及格等)
- 百度是垃圾,放弃百度!
- BROCADE 交换机的配置手册
- IIS错误 Server Error in '/' Application. Access to the Path Is Denied
- struts2配置 action
- FFMPEG在windows平台编译的详细过程
- 报关与报剑的联系区别