jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动


Posted in Javascript onMarch 27, 2014

利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动

下面是我的 js文件原码:

var mail={ 
//初始化 
init:{ 
//初始化数据 
initdata:{ 
did:'', 
ttitle:'', 
sendpassword:'', 
description:'' 
}, 
//初始化事件 
initevent:{ 
DataEvent:function(){ 
$("#did").unbind("change");//获取一级菜单,绑定事件 
$("#did").bind("change",function(){ 
//alert($(this).val()); 
mail.init.initdata.did=$(this).val(); 
//alert(mail.init.initdata.did); 
mail.init.initevent.getuser(); 
}); 
}, 
<span style="color:#ff0000;">getuser:function(){ 
$.post("mailAction_showUsers?did="+mail.init.initdata.did,null,function(data){ 
var uidoption=$("#uid") ;//获取二级菜单 
uidoption.empty();//将列表清空 
for(var i=0;i<data.users.length;i++){ 
//向里面填充option,通过循环 
uidoption.append("<option value="+data.users[i].uid+ " >"+data.users[i].username+"</option>" ); 
} 
});</span> 
}, 
submitCheck:function(){ 
$("#send").unbind("click"); 
$("#send").bind("click",function(){ 
mail.init.initdata.description=$("input[type='textarea']").text(); 
mail.init.initdata.sendpassword=$("input[name='sendpassword']").val(); 
mail.init.initdata.ttitle=$("input[name='ttitle']").val(); if(mail.init.initdata.sendpassword==""){ 
alert("请输入密码!"); 
return false; 
} 
else if(mail.init.initdata.ttitle==""){ 
alert("请输入主题!"); 
return false ; 
} 
else if(mail.init.initdata.description==""){ 
alert("请输入内容!"); 
return false; 
} 
else 
return true; 
}); 
} 
} 
} 
} 
$().ready(function(){ 
mail.init.initevent.DataEvent(); 
mail.init.initevent.submitCheck(); 
});

这是后台的action:
private int did; 
public String getDid(){ 
... 
} 
public void setDid(Strign did){ 
... 
} 
public String showUsers(){ users=(ArrayList<User>)this.userService.getUsersByDid(did); 
System.out.println(users.size()+"..."); 
return SUCCESS; 
}

struts.xml的配置:
<package name="users" namespace="/" extends="json-default"> 
<action name="mailAction_showUsers" method="showUsers" class="mailAction"> 
<result type="json"></result> 
</action> </package>

前台的jsp页面:
<td width="65px">接收人</td> 
<td> <s:select list="departmentlist" listKey="did" listValue="dname" id="did" name="did"></s:select> 
<s:select list="users" listKey="uid" listValue="username" id="uid" name="uid"></s:select> 
</td>

这个是 实现后运行的截图:
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动 
写给有需要的人。。。参考参考
Javascript 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
JavaScript运算符小结
Jun 03 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
详解tween.js的使用教程
Sep 14 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 Javascript
js无刷新操作table的行和列
Mar 27 #Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 #Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 #Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 #Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 #Javascript
JS中判断null、undefined与NaN的方法
Mar 26 #Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 #Javascript
You might like
php Ajax乱码
2008/04/09 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
对Python 数组的切片操作详解
2018/07/02 Python
python实现动态创建类的方法分析
2019/06/25 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
数组越界问题
2015/10/21 面试题
使用C#编写创建一个线程的代码
2013/01/22 面试题
时尚休闲吧创业计划书
2014/01/25 职场文书
小学庆六一活动方案
2014/02/28 职场文书
产品质量承诺书范文
2014/03/27 职场文书
大学班级计划书
2014/04/29 职场文书
售房委托书
2014/08/30 职场文书
金秋助学感谢信
2015/01/21 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书