1需求分析
根据部门选择部门下的用户
思路:
采用两个下拉列表,一个下拉列表绑定部门,当下拉列表的值发生变化时,修改下拉列表2的数据,完成ajax二级联动
1 静态页面准备两个下拉列表
<p style="width:200px;height:50px; ">选择部门:
<select id="dept" style="width:120px;height:20px;" ">
</select>
</p>
<p style="width:200px;height:50px; ">选择用户:
<select id="user" name="" style="width:120px;height:20px;">
<option style="width:80px;height:50px" value="0" >--请选择用户--- </option>
</select>
</p>
2 页面初始化加载dept下拉列表
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type:'GET',
contentType:'application/json;charset=utf-8',
dataType:'json',
url:'${pageContext.request.contextPath}/dept/list.do', // 请求查询dept部门列表的action的方法
success:function(res){
for(var i =0;i<res.length;i++){
var item =res[i];
var message = "";
message+="<option ";
message+="style='width:80px;height:50px''";
message += " value="+item.deptId+" >";
message += item.deptName;
message +="</option>"
$("#dept").append(message);
}
}
});
});
</script>
3绑定部门下拉列表事件
<script type="text/javascript">
$("#dept").on("change",function(){
var deptId= $(this).find("option:selected").val();//获取部门下拉列表的选中值
$("#user").empty();//填入新数据前清空数据
$.ajax({
url:"${pageContext.request.contextPath}/user/"+deptId+"/list.do", // 根据部门id查询该部门下的所有用户
dataType:"json",
type:"get",
success: function(res){
if(res!=null){
for(var i =0;i<res.length;i++){
var item =res[i];
var message = "";
message+="<option ";
message+="style='width:80px;height:50px''";
message += " value="+item.userId+" >";
message += item.userName;
message +="</option>"
$("#user").append(message);
}
}
}
})
});
</script>
对了需要导入jquery的文件