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();
				});
		},
			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>" );
					}
				});
		},
			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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值