JavaScript Ajax Json实现上下级下拉框联动效果实例代码

  最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N

  

复制代码 代码如下:

  <div class="forntName">部门</div>

  <div class="inpBox">

  <select  name="department" id="department"  onchange="change();" style="width:200px;" >

  <option value='-1'>请选择</option>

  <s:iterator value="departmentList">

  <option value='<s:property value="departmentCode"/>'><s:property value="departmentName"/></option>

  </s:iterator>

  <select>

  </div>

  <SPAN style="WHITE-SPACE: pre"> </SPAN><div class="forntName">人员</div>

  <div class="inpBox">

  <select name="workorderOperator" id = "workorderOperator" style="width:200px;">

  <s:iterator value="userList">

  <option value='<s:property value="userName"/>'><s:property value="userName"/></option>

  </s:iterator>

  </select>

  </div>

  部门下拉框的onchange()事件走一个AJAX方法,返回一个JSON对象(JSON里放的是个LIST)。

  js方法在此页面的写法:

  

复制代码 代码如下:

  <script type="text/javascript">

  function change(){

  var departmentCode =$("#department").val();

  var params = {

  'departmentCode':departmentCode

  };

  $.ajax({

  type: 'get',

  url: "departmentChangeEvent.shtml",

  cache: false,

  data: params,

  dataType: 'json',

  success: function(data){

  var sel2 = $("#workorderOperator");

  sel2.empty();

  if(data==null)

  {

  sel2.append("<option value = '-1'>"+"部门人员为空"+"</option>");

  }

  var items=data.list;

  if(items!=null)

  {

  for(var i =0;i<items.length;i++)

  {

  var item=items[i];

  sel2.append("<option value = '"+item.userName+"'>"+item.userChinesename+"</option>");

  };

  }

  else

  {

  sel2.empty();

  }

  },

  error: function(){

  return;

  }

  });

  //$.post(url, params, callback);

  }

  </script> 

  此处返回的data里包含list(list见后文),list里包含着人员的代码,人员的姓名两个属性。然后先把人员下拉框empty(),通过select控件append方法 添加新的下拉框元素。

  后台代码:

  

复制代码 代码如下:

  public String departmentChangeEvent() throws Exception{

  userList=service.queryForList("Workorder.queryUserByDepartmentCode", departmentCode);

  if(userList!=null&&userList.size()>0)

  {

  HttpServletResponse response = ServletActionContext.getResponse();

  response.setContentType("text/html;charset=utf-8");

  response.setHeader("Pragma","No-cache");

  response.setHeader("Cache-Control","no-cache");

  response.setHeader("Cache-Control", "no-store");

  PrintWriter writer = response.getWriter();

  JSONObject json = new JSONObject();

  Map map = new HashMap();

  map.put("list",userList);

  JSONObject jso = JSONObject.fromObject(map);

  writer.write(jso.toString());

  writer.flush();

  writer.close();  }

  return null;

  }

  这个方法是部门切换事件,通过departmentCode(field域,有set,get)来求的当前部门下的用户放到userList中。

  然后通过标准写法把userList放到一个定义好的HashMap中,KEY为list。

  

复制代码 代码如下:

  <STRONG> JSONObject jso = JSONObject.fromObject(map);</STRONG>

  这是最为关键的一步,有的json对象创建方法也可以为JSONObject jso = new JSONObject() ; 然后把list里的记录放入到jso中。。。

  在这里是行不通的,前台会认为返回的是个字符串。。。

  struts中 返回类型为json

  

复制代码 代码如下:

  <action name="departmentChangeEvent" class="workorderAction" method="departmentChangeEvent">

  <result type="json">

  </result>

  </action>