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(二)事件机制(2)
Dec 06 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
Vue.js表单控件实践
Oct 27 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
yii添删改查实例
2015/11/16 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
javascript动画浅析
2012/08/30 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
Python构建XML树结构的方法示例
2017/06/30 Python
django连接oracle时setting 配置方法
2019/08/29 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
python梯度下降算法的实现
2020/02/24 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
活动宣传策划方案
2014/05/23 职场文书
经营理念口号
2014/06/21 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
用人单位聘用意向书
2015/05/11 职场文书
高三语文教学反思
2016/02/16 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP