欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2020-11-14 11:28:07|栏目:JavaScript代码|点击:
利用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实现文本的语音朗读

栏    目:JavaScript代码

下一篇:JavaScript算法系列之快速排序(Quicksort)算法实例详解

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

本文地址:http://www.codeinn.net/misctech/22301.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有