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技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
ionic3 懒加载
Aug 16 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 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安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
javascript的事件描述
2006/09/08 Javascript
js表格分页实现代码
2009/09/18 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
保安员岗位职责
2013/11/17 职场文书
车间机修工岗位职责
2014/02/28 职场文书
出纳员岗位职责
2014/03/13 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书