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实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
jquery移动节点实例
Jan 14 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python 文件转成16进制数组的实例
2018/07/09 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
缴纳养老保险的证明
2014/01/10 职场文书
六个一活动实施方案
2014/03/21 职场文书
《学会合作》教学反思
2014/04/12 职场文书
节能环保标语
2014/06/12 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
民政局个人整改措施
2014/09/24 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
企业工会工作总结2015
2015/05/13 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS