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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
vue左右侧联动滚动的实现代码
Jun 06 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 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实现小型站点广告管理(修正版)
2006/10/09 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
javascript中对变量类型的判断方法
2015/08/09 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
js页面加载后执行的几种方式小结
2020/01/30 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
前厅部经理岗位职责范文
2014/02/04 职场文书
护士岗位职责
2014/02/16 职场文书
工作分析计划书
2014/04/30 职场文书
2014最新实习证明模板
2014/10/02 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
详解CSS3浏览器兼容
2022/12/24 HTML / CSS