当前位置:编程学习 > JAVA >>

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

最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N
[html] 
<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方法在此页面的写法:
[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>");  
              };  
             }       
         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.zzzyk.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>   
     
补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,