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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
javascript 写类方式之四
Jul 05 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
详解uniapp的全局变量实现方式
Jan 11 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
织梦模板标记简介
2007/03/11 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
解析link_mysql的php版
2013/06/30 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
2014迎新年晚会策划方案
2014/02/23 职场文书
电视节目策划方案
2014/05/16 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
公司员工活动策划方案
2014/08/20 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python