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实现的UBB编码函数
Mar 09 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
vue登录路由验证的实现
Dec 13 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 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删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php实现对象克隆的方法
2015/06/20 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
Lab.js初次使用笔记
2015/02/28 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
python开发之list操作实例分析
2016/02/22 Python
用python实现的线程池实例代码
2018/01/06 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
python自动化之Ansible的安装教程
2019/06/13 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python3并发写文件与Python对比
2019/11/20 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
毕业生实习鉴定
2013/12/11 职场文书
中秋节超市促销方案
2014/01/30 职场文书
项目经理任命书
2014/06/04 职场文书
运动会运动员赞词
2015/07/22 职场文书
儿子满月酒致辞
2015/07/29 职场文书
市场营销计划书
2019/04/24 职场文书
七年级上册生物的课件
2019/08/07 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python