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 相关文章推荐
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
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中SQL注入攻击与XSS攻击
2012/06/10 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
Django自定义manage命令实例代码
2018/02/11 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python实现多进程的四种方式
2019/02/22 Python
详解python和matlab的优势与区别
2019/06/28 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
基于python 凸包问题的解决
2020/04/16 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
设计毕业生简历中的自我评价
2013/10/01 职场文书
平面设计师的工作职责
2013/11/21 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
新员工试用期自我评价
2015/03/10 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书