首页 web前端 js教程 jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动_javascript技巧

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

May 16, 2016 pm 04:54 PM
下拉菜单

利用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技巧 
写给有需要的人。。。参考参考
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

WPS表格下拉菜单怎么做 WPS表格下拉菜单怎么做 Mar 21, 2024 pm 01:31 PM

WPS表格下拉菜单怎么做

如何在 Microsoft Word 中添加艺术页面边框 如何在 Microsoft Word 中添加艺术页面边框 Apr 27, 2023 pm 08:25 PM

如何在 Microsoft Word 中添加艺术页面边框

如何打印不带注释的 Word 文档 如何打印不带注释的 Word 文档 Apr 18, 2023 pm 02:19 PM

如何打印不带注释的 Word 文档

在 Windows 11 上调整屏幕以监控的 5 种方法(和修复) 在 Windows 11 上调整屏幕以监控的 5 种方法(和修复) Apr 14, 2023 pm 03:28 PM

在 Windows 11 上调整屏幕以监控的 5 种方法(和修复)

如何在Google幻灯片中设置图像透明度? 如何在Google幻灯片中设置图像透明度? Apr 25, 2023 pm 06:52 PM

如何在Google幻灯片中设置图像透明度?

实现微信小程序中的下拉菜单效果 实现微信小程序中的下拉菜单效果 Nov 21, 2023 pm 03:03 PM

实现微信小程序中的下拉菜单效果

如何在 Windows 11 上使用系统范围的实时字幕 如何在 Windows 11 上使用系统范围的实时字幕 May 02, 2023 pm 01:19 PM

如何在 Windows 11 上使用系统范围的实时字幕

如何使用 Vue 实现下拉菜单? 如何使用 Vue 实现下拉菜单? Jun 26, 2023 am 12:17 AM

如何使用 Vue 实现下拉菜单?

See all articles