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 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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中将网址转换为超链接的函数
2011/09/02 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
实例讲解php数据访问
2016/05/09 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
JS字符串截取函数实例
2013/12/27 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
《珍珠泉》教学反思
2014/02/20 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android