JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013-11-23 00:00
1391 查看
最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N
部门下拉框的onchange()事件走一个AJAX方法,返回一个JSON对象(JSON里放的是个LIST)。
js方法在此页面的写法:
此处返回的data里包含list(list见后文),list里包含着人员的代码,人员的姓名两个属性。然后先把人员下拉框empty(),通过select控件append方法 添加新的下拉框元素。
后台代码:
这个方法是部门切换事件,通过departmentCode(field域,有set,get)来求的当前部门下的用户放到userList中。
然后通过标准写法把userList放到一个定义好的HashMap中,KEY为list。
这是最为关键的一步,有的json对象创建方法也可以为JSONObject jso = new JSONObject() ; 然后把list里的记录放入到jso中。。。
在这里是行不通的,前台会认为返回的是个字符串。。。
struts中 返回类型为json
<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方法在此页面的写法:
<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。
<STRONG> JSONObject jso = JSONObject.fromObject(map);</STRONG>
这是最为关键的一步,有的json对象创建方法也可以为JSONObject jso = new JSONObject() ; 然后把list里的记录放入到jso中。。。
在这里是行不通的,前台会认为返回的是个字符串。。。
struts中 返回类型为json
<action name="departmentChangeEvent" class="workorderAction" method="departmentChangeEvent"> <result type="json"> </result> </action>
相关文章推荐
- JavaScript Ajax Json实现上下级下拉框联动效果实例代码
- JavaScript Ajax Json实现上下级下拉框联动效果实例代码
- JavaScript Ajax Json实现上下级下拉框联动
- JavaScript实现三级联动菜单实例代码
- javascript实现下雪效果【实例代码】
- javascript实现省市区三级联动选择的代码(数据为模拟json数据)
- 使用JavaScript实现ajax的实例代码
- javascript实现上传图片并预览的效果代码实例
- 原生javascript AJAX 三级联动的实现代码
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- jQuery+JSON实现AJAX二级联动实例分析
- javascript实现json页面分页实例代码
- 使用ajax+json+struts实现省份下拉框二级联动
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
- query ajax json 通过后台代码(查询数据库)绑定html控件select 下拉框实例
- 原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
- PHP Ajax JavaScript Json获取天气信息实现代码
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- 利用JavaScript实现新闻滚动效果(实例代码)
- jquery利用json实现地区联动效果代码