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>

  这个是 实现后运行的截图:

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

  写给有需要的人。。。参考参考