您好,欢迎访问一九零五行业门户网

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.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>
其它类似信息

推荐信息