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学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
jquery插件validate验证的小例子
May 08 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
javascript实现切换td中的值
Dec 05 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
js querySelector() 使用方法
Dec 21 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
PHP安全技术之 实现php基本安全
2010/09/04 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP的全局错误处理详解
2016/04/25 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
页面使用密码保护代码
2013/04/10 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python放大图片和画方格实现算法
2018/03/30 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
《放飞蜻蜓》教学反思
2014/04/27 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
效能风暴心得体会
2014/09/04 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2014年检验员工作总结
2014/11/19 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis