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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
js实现的map方法示例代码
Jan 13 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
jQuery知识点整理
2015/01/30 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
python xpath获取页面注释的方法
2019/01/14 Python
python hough变换检测直线的实现方法
2019/07/12 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
python中wheel的用法整理
2020/06/15 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
大学军训通讯稿
2014/01/13 职场文书
网络工程师职业规划
2014/02/10 职场文书
元宵节主持词
2014/03/25 职场文书
社会工作专业求职信
2014/07/15 职场文书
励志演讲稿500字
2014/08/21 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
入党介绍人考察意见
2015/06/01 职场文书
公司酒会主持词
2015/07/02 职场文书
电力安全学习心得体会
2016/01/18 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
vue 自定义组件添加原生事件
2022/04/21 Vue.js