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几个不错的函数 $$()
Oct 09 Javascript
jquery 表单取值常用代码
Dec 22 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
jQuery的position()方法详解
Jul 19 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
深入浅析vue中cross-env的使用
Sep 12 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
js前端对于大量数据的展示方式及处理方法
Dec 02 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使用cookie保存用户登录的用户名实例
2015/01/26 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
Z-Blog中用到的js代码
2007/03/15 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
js仿微信抢红包功能
2020/09/25 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python3 批量扫描端口的例子
2019/07/25 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
蛋白质世界:Protein World
2017/11/23 全球购物
证婚人搞笑证婚词
2014/01/10 职场文书
班班通校本培训方案
2014/03/12 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
大学毕业生个人总结
2015/02/28 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
三八节祝酒词
2015/08/11 职场文书
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript