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 相关文章推荐
lib.utf.js
Aug 21 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python dict 相同key 合并value的实例
2019/01/21 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
自我鉴定范文200字
2013/10/02 职场文书
毕业生的自我鉴定
2013/10/29 职场文书
财务经理岗位职责
2013/11/09 职场文书
车队司机自我鉴定
2014/03/02 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
Python+pyaudio实现音频控制示例详解
2022/07/23 Python