新手入门之ajax二级联动--附实现源码

  Web开发中经常会遇到一些二级联动甚至多级联动,一二级菜单,省市县,公司团队部门等等

  实现思路

  一级菜单

  就是个多option 的select下拉框,option可以来自页面自定义或则数据库

  二级菜单

  当一级菜单选中后,去查询数据库,查询到对应的二级菜单的内容,使用apend()添加到二级菜单的位置,一二级菜单就实现了联动,下面以部门和部门人员的联动为例介绍下

  实际实现

  onchange="showDept(this.value)"

  一级菜单选择改变触发请求

  function showDept(obj)

  {

  var dept = obj;

  $.ajax({

  type: "post",

  url: "erji.jsp",

  data: "dept="+dept,

  async: false,

  success: function(data){

  $("#xingming option").remove()

  var result=data.split("#");

  for(var i=0;i<result.length;i++){< p="">

  $("#xingming").append(result[i]);

  }

  }

  });

  前端请求到后端,后端请求数据库二级菜单的内容,并返回给页面显示

  String te = request.getParameter("dept");

  String s = "select id,realname from user where dept = '" + te + "'";

  Statement stmt = db.getConnection().createStatement();

  rs = stmt.executeQuery(s);

  String temp = "请选择#";

  while (rs.next()) {

  temp = temp + "

  }

  out.println(temp);

  思考

  当一级菜单选中之后又不选中,二级菜单的处理规则是怎么样的?

  选择之后,点击查询后页面如何记住查询条件的呢?

  当一级菜单选中之后有可能还是会选择二级菜单,这时候一级菜单不选中,还是需要请求后端重置二级菜单实现一二级联动

  将选中的一二级菜单值传到页面设置选中即可(可使用JS)

  多级联动同二级联动

最后依然给大家提供一个相应的参考资料,希望对大家能够有所帮助

ajax二级联动
http://www.makeru.com.cn/live/1396_660.html?s=45051

猜你喜欢

转载自www.cnblogs.com/QianD/p/11283824.html