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