JavaScript Ajax Json to achieve the upper and lower level drop down box linkage effect instance code

Recently, I tried to make a drop-down box linkage function between departments and personnel. The corresponding relationship between departments and personnel is 1:N

<div class="forntName"> department </div>
 <div class="inpBox">
 <select  name="department" id="department"  onchange="change();" style="width:200px;" >
 <option value='-1'> Please select a </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"> personnel </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>

The onchange() event in the department drop-down box takes an AJAX method and returns a JSON object (a LIST in JSON).

Js method in this page:

<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'>"+" The department is empty "+"</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>  

The data returned here contains the list(see list below), which contains the code of the person and the name of the person. Then, start with the empty() people drop-down box and add a new drop-down box element through the select control append method.

Background code:

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;  
   }  

This method is the department switch event, by the departmentCode(field field, set,get) to find the user under the current department into the userList.

The userList is then written in standard style into a defined HashMap with the KEY as list.

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

This is the most important step, some json object creation methods can also be JSONObject jso = new JSONObject(); Then put the records from the list into the jso...

It doesn't work here, the foreground thinks it's returning a string...

The return type in struts is json

  <action name="departmentChangeEvent" class="workorderAction" method="departmentChangeEvent"> 
       <result type="json">
   </result> 
        </action>