jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动

 更新时间:2014年03月27日 11:19:10   作者:  
这篇文章主要介绍了jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动,需要的朋友可以参考下
利用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>

这个是 实现后运行的截图:
 
写给有需要的人。。。参考参考

相关文章

  • 使用JavaScript实现一个简易的热更新

    使用JavaScript实现一个简易的热更新

    热更新是指在应用程序运行时,对程序的部分内容进行更新,而无需重启整个应用程序,热更新是在不停止整个应用程序的情况下,将新的代码、资源或配置应用于正在运行的应用程序,本文讲给大家介绍一下使用JavaScript实现一个简易的热更新,需要的朋友可以参考下
    2023-08-08
  • 解析原来浏览器原生支持JS Base64编码解码

    解析原来浏览器原生支持JS Base64编码解码

    这篇文章主要介绍了解析原来浏览器原生支持JS Base64编码解码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JavaScript实战之带收放动画效果的导航菜单

    JavaScript实战之带收放动画效果的导航菜单

    这篇文章主要为大家详细介绍了JavaScript实战之带收放动画效果的导航菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JS实现显示当前日期的实例代码

    JS实现显示当前日期的实例代码

    本文通过实例代码给大家介绍了js实现显示当前日期功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • JS 加入收藏夹的代码(主流浏览器通用)

    JS 加入收藏夹的代码(主流浏览器通用)

    所有浏览器通用的js添加收藏夹代码,本文整理了多种方法实现加入收藏夹功能,下面为大家详细介绍下实现代码,感兴趣的朋友可以参考下哈
    2013-05-05
  • js实现touch移动触屏滑动事件

    js实现touch移动触屏滑动事件

    在开始描述touch事件之前,需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象)。这个对象封装一次屏幕触摸,一般来自于手指。它在touch事件触发的时候产生,可以 通过touch event handler的event对象取到
    2015-04-04
  • js实现图片和链接文字同步切换特效的方法

    js实现图片和链接文字同步切换特效的方法

    这篇文章主要介绍了js实现图片和链接文字同步切换特效的方法,涉及javascript操作文字及图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • js实现左右两侧浮动广告

    js实现左右两侧浮动广告

    这篇文章主要为大家详细介绍了js实现左右两侧浮动广告,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • JS正则子匹配实例分析

    JS正则子匹配实例分析

    这篇文章主要介绍了JS正则子匹配用法,结合简单实例形式分析了js正则字匹配的概念、用法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • JS实现的数字格式化功能示例

    JS实现的数字格式化功能示例

    这篇文章主要介绍了JS实现的数字格式化功能,结合实例形式分析了javascript针对数字与字符的相关运算处理技巧,需要的朋友可以参考下
    2017-02-02

最新评论