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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
给网站上的广告“加速”显示的方法
Apr 08 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
JS执行控制之节流模式实例分析
2018/12/21 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
利用python为运维人员写一个监控脚本
2018/03/25 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
python自动点赞功能的实现思路
2020/02/26 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
如何写出好的Java代码
2014/04/25 面试题
30年同学聚会感言
2014/01/30 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
捐款活动总结
2014/08/27 职场文书
关于迟到的检讨书
2015/05/06 职场文书
大学运动会通讯稿
2015/07/18 职场文书
六五普法心得体会2016
2016/01/21 职场文书