本文详细介绍如何利用JavaScript、Ajax和JSON技术实现上下级下拉框的联动效果。通过监听部门下拉框的onchange事件，使用Ajax异步请求后台获取对应人员列表，并将返回的JSON数据动态渲染到人员下拉框中。文章同时提供了前端JS代码、后台Java处理逻辑以及Struts配置示例，帮助开发者快速掌握该功能的实现方法。
部门与人员下拉框联动实现
近期开发中实现了一个部门与人员关联的下拉框联动功能，二者关系为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>
<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>前端JavaScript与Ajax处理
当部门下拉框触发onchange()事件时，会调用一个AJAX方法，该方法返回一个包含人员列表的JSON对象。
此页面中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);
}
}</script>返回的data对象中包含list属性，该list包含人员的代码和姓名两个字段。首先清空人员下拉框，然后利用select控件的append方法动态添加新的选项。
后台Java代码与JSON转换
后台处理代码如下：
代码如下：
public String departmentChangeEvent() throws Exception{
userList=service.queryForList("Workorder.queryUserByDepartmentCode", departmentCode);
if(userList!=null&&userList.size()>0)
{
{
response.setContentType("text/html;charset=utf-8");
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（包含set/get方法）查询当前部门下的用户并存入userList。
随后按照标准流程将userList放入预定义的HashMap中，键名为list。
代码如下：<STRONG> JSONObject jso = JSONObject.fromObject(map);</STRONG>
这是最关键的一步，部分JSON对象创建方式如JSONObject jso = new JSONObject()；然后将list记录放入jso中……
Struts JSON返回类型配置
在此场景下不可行，前台会误认为返回的是字符串……
Struts中返回类型为json的配置如下：
<action name="departmentChangeEvent" class="workorderAction" method="departmentChangeEvent">
<result type="json">
</result>
</action>