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>

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

(0)

相关推荐

  • java json字符串转JSONObject和JSONArray以及取值的实例

    java json字符串转JSONObject和JSONArray以及取值的实例 实现代码: import net.sf.json.JSONArray; import net.sf.json.JSONObject; public class JsonTest { public static void main(String[] args) { String joStr = "{name:\"张三\",age:\"20\"}"; //将json字符

  • JSON取值前判断

    复制代码 代码如下: public static void main(String[] args)throws Exception{      String jsonStr1="{\"access_token\":\"OezXcEiiBSKSxW0eoylIeIVb08lFhyeFsq6cUJJNo8XYLoJjqYARJOZUrnqhfvnyMKOSjz5SHPHGUmt6f09_762MWQ0HLnZtffDPyD2A6TgCqWlZAEsHLhIaaQVYx1

  • 浅谈json取值(对象和数组)

    按对象取值: jQuery代码如下 (function ($) { $.getJSON('ajax/test.json', function (data) { var items = []; $.each(data.comments, function (key, val) { items.push('<li class="' + 'tag' + val.class + '">' + '<a href="#">' + val.content

  • js遍历json对象所有key及根据动态key获取值的方法(必看)

    实例如下: var obj = {}; for(var k in obj) { //遍历对象,k即为key,obj[k]为当前k对应的值 console.log(obj[k]); } 以上这篇js遍历json对象所有key及根据动态key获取值的方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 百度编辑器从Json对象中取值,完成初次渲染,在编辑器内画表格

    第一次做企业级应用,感觉一点:对逻辑必须要非常明确,而且有了很多与之前不一样的概念. 在百度编辑器中,如何完成从服务器取值,来渲染出表格?这里需要先console.log(editor);在官方API中已经告诉我们写入的方法是setContent(),这里只要能传入我们最终拼好的的字符串,即可以在初始化中,绘制出我们想要的任何节点. 再send()完成之后,onreadystatechange = function(){},先上一段AJAX的代码.这段AJAX是消除游览器兼容,从尼古拉斯的书中学

  • 实例详解JSON取值(key是中文或者数字)方式

    JSON取值(key是中文或者数字)方式详解 先准备一个json对象用于演示 var json = {'name':'zhangsan', '年龄':23, 404:'你可能迷路了'}; 1.使用JS中with关键字 with(json) { console.log(name);//输出:zhangsan console.log(年龄);//输出:23 console.log(404);//输出:404,用这种方法读取key是数字的属性,有问题 } 2.最常见的传统的读取key console.

  • 当json键为数字时的取值方法解析

    当json的键为数字时如何取值,如: var aa={'111':'aaaaa'}; alert(sss.111); 这样是不行的,alert不会弹任何东西. json的键必须是一个对象,才能取出东西,如: var aa={'s111s':'aaaaa'}; var idd="s111s"; alert(sss.idd); 解答: 对于数字键名或者非正常变量字符(比如有空格),必须使用 aa[x]的方式.var aa={'111':'aaaaa'}; alert(sss["1

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

    利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 复制代码 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:'', ttitle:'', sendpassword:'', description:'' }, //初始化事件 initevent:{ DataEvent:function(){ $("#did").unbind("change");//获取一级

  • select下拉菜单实现二级联动效果

    需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级 效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分 首先是建立两个表的实体 需要注意的就是写注解了.代码就不贴了. DAO层代码 年级DAO 年级的DAO层没什么代码,就是继承那三个类,具体用到哪个我也不清楚,就直接都继承了. public interface GraceDAO extends PagingAndSortingRepository<Grace, String>,JpaSpeci

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

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

  • jQuery实现下拉菜单的实例代码

    基本效果是这样的~~ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width:

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

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

  • jQuery 渐变下拉菜单

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

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

  • jquery实现下拉菜单的手风琴效果

    本文实例为大家分享了jquery实现下拉菜单手风琴展示的具体代码,供大家参考,具体内容如下 html代码 <div class="site-nav"> <ul class="site-accordion"> <li> <div class="tab-head">学科领域</div> <ul class="tabs-list"> <li>机械电子

  • jQuery实现下拉菜单动态添加数据点击滑出收起其他功能

    上面的人要hui admin  做页面,本人前端比较菜,这框架也没用过. 因为是动态添加数据 .表也没有,..然后子菜单列表只能通过字符串拼接的方式显示. (伪造的)数据是传过来了 发现这个框架的点击菜单,子菜单滑出的效果触发不了,应该是封装了吧..反正不会引用.就自己写了个点击事件(,列表格式还是参照模板). ①:请求数据+ul拼接 比较糙,两边icon 无力回天,不过功能是实现了 $.ajax({ url:'/type/reportType', data:{"token":getC

随机推荐