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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
js+css实现select的美化效果
Mar 24 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 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 和 MYSQL
2006/10/09 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
js 操作css实现代码
2009/06/11 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Python中pillow知识点学习
2018/04/30 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
群众路线对照检查剖析材料
2014/10/09 职场文书
成事在人观后感
2015/06/16 职场文书
获奖感言怎么写
2015/07/31 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
Java基础-封装和继承
2021/07/02 Java/Android
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技