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 相关文章推荐
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 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多线程类及用法实例
2014/12/03 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
JS画线(实例代码)
2013/11/20 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Python实现ATM系统
2020/02/17 Python
pytorch masked_fill报错的解决
2020/02/18 Python
为什么称python为胶水语言
2020/06/16 Python
python opencv肤色检测的实现示例
2020/12/21 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
商务邀请函范文
2014/01/14 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
2015年度女工工作总结
2015/10/22 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书