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中继承的一些示例方法与属性参考
Aug 07 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php权重计算方法代码分享
2014/01/09 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
nodejs教程之入门
2014/11/21 NodeJs
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python中的编码知识整理汇总
2016/01/26 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Python tcp传输代码实例解析
2020/03/18 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
学校招生宣传广告词
2014/03/19 职场文书
中班开学寄语
2014/04/04 职场文书
台风停课通知
2015/04/24 职场文书
黄埔军校观后感
2015/06/10 职场文书
教师网络培训心得体会
2016/01/09 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python