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 快捷键设置实现代码
Mar 13 Javascript
javascript获取当前ip的代码
May 10 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
Vue通过input筛选数据
Oct 26 Javascript
微信小程序自定义组件
Aug 16 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
vue抽出组件并传值实例
Jul 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面向对象 字段的声明与使用
2012/06/14 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
JS实现吸顶特效
2020/01/08 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python中一般处理中文的几种方法
2019/03/06 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
出售房屋委托书范本
2014/09/24 职场文书
优秀教师个人总结
2015/02/11 职场文书
2016春季运动会前导词
2015/11/25 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python