源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-06-27 08:03 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码:
[u]复制代码[/u] 代码如下:
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:
[u]复制代码[/u] 代码如下:
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的配置:
[u]复制代码[/u] 代码如下:
<package name="users" namespace="/" extends="json-default"> <action name="mailAction_showUsers" method="showUsers" class="mailAction"> <result type="json"></result> </action> </package>
前台的jsp页面:
[u]复制代码[/u] 代码如下:
<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>
这个是 实现后运行的截图: [img]http://files.jb51.net/file_images/article/201403/201403271121271.gif?2014227112141[/img]   写给有需要的人。。。参考参考
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部