1、body代码
<div class="form-group controls" >
<label class="form-label control-label">所属部门:</label>
<select id="dId" name='dId' onchange="selectTeamGroup()">
<c:forEach items="${department}" var="item" varStatus="status">
<option value='${item.id}'>${item.dName}</option>
</c:forEach>
</select>
<label class="form-label control-label">所属班组:</label>
<select id="tgId" name="tgId">
</select>
</div>
2、js脚本代码
//根据部门信息id查找该部门的班组信息
function selectTeamGroup(){
var id = document.getElementById("dId").value;
$(function(){
$.ajax({
url : "${ctx}/employeeController/findTeamGroup.do",
type : "post", //以Post方式发送请求
data : {id :id },//请求时发送的数据
dataType : "json", //返回的数据类型
async : true, //本次请求是否为异步请求
success : function(result){
$("#tgId").empty();
$.each(result,function(i,item){
$("#tgId").append("<option value=" + item.id + ">"
+ item.tgName + "</option>");
});
},
error : function(){
layer.alert("网络有误!", {icon: 8});
}
});
});
}
$.ajax({
type: "POST",
url: "/jdcyw/cityjson.action",
data: {cityfid:loca2},
async:false,
dataType: "json",
success: function(msg){
if(msg.city.length==0){
var se=document.getElementById("city");
se.length=0;
}
var w=document.getElementById("city");
w[0]=new Option('--请选择城市--','');
for ( var int = 0; int < msg.length; int++) {
w[int+1]=new Option(msg[int].cityName,msg[int].cityName);
}
},
error: function() {
alert("获取城市时出现了错误!");
}
});
3、后台代码
// 根据部门id查找班组信息
@RequestMapping("findTeamGroup")
public void findTeamGroup(HttpServletResponse response, int id)
throws IOException {
List<TeamGroup> lists = comboboxService.findGroups(id); //查询数据的方法
JSONArray jsonArray = JSONArray.fromObject(lists);
PrintWriter pWriter = response.getWriter();
pWriter.print(jsonArray);
pWriter.close();
}