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>

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

相关文章

  • 原生Js实现的画廊功能

    原生Js实现的画廊功能

    这篇文章主要介绍了原生Js实现的画廊功能,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下
    2021-05-05
  • Javascript页面添加到收藏夹的简单方法

    Javascript页面添加到收藏夹的简单方法

    这篇文章介绍了Javascript页面添加到收藏夹的简单方法,有需要的朋友可以参考一下
    2013-08-08
  • 一次微信小程序内地图的使用实战记录

    一次微信小程序内地图的使用实战记录

    这篇文章主要给大家介绍了关于一次微信小程序内地图使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • 微信小程序 scroll-view的使用案例代码详解

    微信小程序 scroll-view的使用案例代码详解

    这篇文章主要介绍了微信小程序 scroll-view的使用案例分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • JS 文字符串转换unicode编码函数

    JS 文字符串转换unicode编码函数

    AJAX传递中文字符串时必须把中文字符串编码成unicode,一般会用到JS的自带函数escape().不过找到了更好的函数来确决中文字符转换成unicode编码的函数
    2009-05-05
  • uniapp中uni.navigateBack返回后刷新页面数据的实现

    uniapp中uni.navigateBack返回后刷新页面数据的实现

    本文主要介绍了uniapp中uni.navigateBack返回后刷新页面数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • uniapp引入axios异步框架的完整步骤

    uniapp引入axios异步框架的完整步骤

    虽然Uniapp可以使用Vue.js自带的$http,但也可以使用Axios,只需要在项目中进行简单的配置,这篇文章主要给大家介绍了关于uniapp引入axios异步框架的相关资料,需要的朋友可以参考下
    2023-12-12
  • 详解javascript中的Strict模式

    详解javascript中的Strict模式

    我们都知道javascript是一个弱类型语言,在ES5之前,javascript的程序编写具有很强的随意性,我可以称之为懒散模式(sloppy mode)。比如可以使用未定义的变量,可以给对象中的任意属性赋值并不会抛出异常等等。本文将详细介绍javascript中的Strict模式。
    2021-06-06
  • JavaScript偏函数与柯里化实例详解

    JavaScript偏函数与柯里化实例详解

    这篇文章主要介绍了JavaScript偏函数与柯里化,结合实例形式详细分析了JavaScript偏函数与柯里化的概念、原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-03-03
  • 使用JS判断页面是首次被加载还是刷新

    使用JS判断页面是首次被加载还是刷新

    这篇文章主要介绍了js判断页面是首次被加载还是刷新,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05

最新评论