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

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

[html] 

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

    <div class="inpBox">  

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

立即学习“Java免费学习笔记（深入）”；

    <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方法在此页面的写法:

[javascript] 

<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>");  

jQuery实现select省市区三级联动下拉框

jQuery实现select省市区三级联动下拉框，通过选择省，市区的值随之变化，非常适用于企业网站或者商城网站，用户在注册的时候填写的信息。php中文网推荐下载！

81

查看详情

              };  

             }       

         else  

             {  

             sel2.empty();    

             }  

        },  

        error: function(){  

            return;  

        }  

    });  

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

}    

[javascript]  

</script>  

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

后台代码:

[java]  

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中。www.2cto.com

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

[java] 

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

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

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

struts中 返回类型为json

[html]  

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

      <result type="json">  

    </result>   

       </action>