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技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
js 走马灯简单实例
Nov 21 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 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
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
PHP反射实际应用示例
2019/04/03 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
初学JavaScript第二章
2008/09/30 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
python、Matlab求定积分的实现
2019/11/20 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
学校班班通实施方案
2014/06/11 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
小学科学教学计划
2015/01/21 职场文书
客房部经理岗位职责
2015/02/02 职场文书
社区端午节活动总结
2015/02/11 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
新店开张宣传语
2015/07/13 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP