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 相关文章推荐
Opacity.js
Jan 22 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
jquery indexOf使用方法
Aug 19 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 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 iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
javscript对象原型的一些看法
2010/09/19 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
python strip()函数 介绍
2013/05/24 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
如何将python中的List转化成dictionary
2016/08/15 Python
python 接收处理外带的参数方法
2018/12/03 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python检测IP地址变化并触发事件
2018/12/26 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
室内拓展活动方案
2014/02/13 职场文书
年会主持词结束语
2014/03/27 职场文书
2015年助残日活动总结
2015/03/27 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
污染环境建议书
2015/09/14 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技