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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
微信小程序获取当前位置和城市名
Nov 13 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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 存储文本换行实现方法
2010/01/05 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
工商管理实习生自我鉴定范文
2013/12/18 职场文书
养牛场项目建议书
2014/05/13 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
中国合伙人观后感
2015/06/02 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis