ajax二级联动

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的文件