JavaScript Ajax Json实现上下级下拉框联动效果实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript Ajax Json实现上下级下拉框联动效果实例代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3327字,纯文字阅读大概需要5分钟。
内容图文
![JavaScript Ajax Json实现上下级下拉框联动效果实例代码](/upload/InfoBanner/zyjiaocheng/365/a522137bc0b641648c2bc2b8d9b91d8c.jpg)
最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是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<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实现上下级下拉框联动效果实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。