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

 这篇文章主要介绍了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> 

时间: 2024-08-03 01:29:46

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

jquery带下拉菜单和焦点图代码分享_jquery

jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码.感兴趣的朋友快来学习学习吧 运行效果图:                           ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery带下拉菜单和焦点图如下 <head> <meta http-equiv="Content-Type"

jquery纵向下拉菜单

<%@ page language="c#" autoeventwireup="true" codefile="thirdmenu.asp教程x.cs" inherits="thirdmenu" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml

分享我的jquery实现下拉菜单心的_jquery

摘要: jquery库给我们带来了很多方便的地方,使用jquery实现一个简单的下拉菜单已经是很简单了,但也有不同的实现方法.今天自己使用jquery写了一个下拉菜单,参考了Xiaofeng Wang的SexyDropDownMenu2010,其中还是有一些东西感觉值得记录一下. 实现: 首先上他的代码(把全部的代码贴上来太长了,就捡部分吧), 一.html中ul列表 <ul class="topmenu"> <li><a href="#&quo

jQuery树形下拉菜单特效代码分享_jquery

本文实例讲述了jQuery实现幻树形下拉菜单特效,实现自动伸缩,分享给大家供大家参考. 运行jQuery树形下拉菜单特效效果图: 为大家分享的jQuery树形下拉菜单代码如下 <head> <title>常用的jquery下拉菜单</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="

jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法_jquery

工程分享: 模块1:下拉菜单的实时显示最近一周时间: //显示日期下拉选框 for(var i=0;i<7;i++){ $("#choose1>option:eq("+i+")").html(GetDateStr(-i)); $("#choose1>option:eq("+i+")").attr("value",GetDateStr(-i));//该语句为了便于下拉选中的数据的值 } //

jQuery 渐变下拉菜单_jquery

这里主要是利目标在鼠标经过时(.hover())利用slideToggle() .slideUp()来显示原来隐藏着的内容: 复制代码 代码如下: $(function(){ $(".dropdown").hover( function(){ $("li ul").slideToggle(800);}, function(){$("li ul").slideUp(1000)} ) }) 复制代码 代码如下: <!DOCTYPE html P

JQuery纵向下拉菜单实现心得

         jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实现一个简单的横纵向菜单,小编相信其他小伙伴都有很多的实现方法,小编今天自己使用JQuery写了一个横纵向菜单,用博文跟小伙伴分享一下小编实现横纵向菜单的实现心得.         当我们浏览网页和使用word编辑一下文字的时候,我们都能看见横向下拉的身影,有了横向菜单,我们能对整个

用jquery实现下拉菜单效果的代码_jquery

效果如下:这是菜单的内容,用ul标签实现菜单: 复制代码 代码如下: <div id="menu"> <ul> <li><a href="">菜单一</a> <ul> <li><a href="">子菜单1</a></li> <li><a href="">子菜单2</a>

超酷jquery多级下拉菜单代码插件

  <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head>     <meta http-equiv="content-type" content="text/html;charset=gbk" />