JavaScript Ajax Json实现下上级上拉框联动

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>
	<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。

 JSONObject jso = JSONObject.fromObject(map);

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

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

struts中 返回类型为json

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