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 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
js尾调用优化的实现
May 23 Javascript
js实现页面图片消除效果
Mar 24 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 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 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
自荐信模版
2013/10/24 职场文书
电视节目策划方案
2014/05/16 职场文书
创先争优个人承诺书
2014/08/30 职场文书
学校节水倡议书
2015/04/29 职场文书
西游记读书笔记
2015/06/25 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
聘任书的格式及模板
2019/10/28 职场文书