JavaScript
发布时间:2022-04-16 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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>
<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<item
s.length;i++)
{ var item=items[i];
sel2.append("<option value = '"+ite
m.userName+"'>"+ite
m.userChi
nesename+"</option>"
); };
}
else
{ sel2.empty(
); }
},
error: function()
{ return;
}
}
); //$.post(url,params,call
BACk
); }
</script>
此处返回的data里包含list(list见后文),list里包含着人员的代码,人员的姓名两个属性。然后先把人员下拉框empty(),通过SELEct控件append方法 添加新的下拉框元素。
后台代码:
public
String departmentChangeEvent() throws Exception
{ userList=
service.queryForList("Workorder.queryUserByDepartmentCode",departmentCod
E);
if(userList
!=null&&userList.size()>0)
{ httpServletResponse response = ServletActionCo
ntext.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(
); JSONOb
ject json = new JSONOb
ject(
); Map map = new HashMap(
); ma
p.put("list",userList
); JSONOb
ject jso = JSONOb
ject.fromOb
ject(ma
p);
writer.write(jso.to
String()
); writer.flush(
); writer.close(
); }
return null;
}
这个方法是部门切换事件,通过departmentCode(field域,有set,get)来求的当前部门下的用户放到userList中。
然后通过标准写法把userList放到一个定义好的HashMap中,KEY为list。
<STRONG> JSONOb
ject jso = JSONOb
ject.fromOb
ject(ma
p);</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实现上下级下拉框联动效果实例代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。