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 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
易被忽视的js事件问题总结
May 14 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
JavaScript实现班级抽签小程序
May 19 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php的控制语句
2006/10/09 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
python中温度单位转换的实例方法
2020/12/27 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
不假外出检讨书
2014/01/27 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
研讨会主持词
2014/04/02 职场文书
企业授权委托书范本
2014/04/02 职场文书
小学三年级学生评语
2014/04/22 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
小学语文教师研修日志
2015/11/13 职场文书
运动会主持人开幕词
2016/03/04 职场文书