layui三级联动下拉框，附ssm后台代码

这是公司的一个项目，前端ui用的layui，后台用的ssm框架，数据库sqlserver，先看效果图

医院是一级下拉框，科室分为两个

直接附上代码吧，

	

		

			
			

				姓名
				

					
				
			

			

				性別
				

					checked> checked>
				
			
			
			

				医院
				

					
						--请选择--
						
							${item.hospitalName}
						
					
				
			
			

				科室
				

					
						--请选择--

					
				
				

					
						--请选择--

					
				
			

			

				职称
				

					
				
			




			

				

					立即提交
					重置
				
			
		
	

医院下拉框是加载这个页面时就已经从后台获取到了的，科室的下拉框没有加载数据。

下面就是三级框联动的js代码

layui.use('form', function() {
		var form = layui.form;

		form.render('select');

		//医院下拉选事件,获取科室下拉选
		form.on('select(hospitalsel)', function(data) {
			var hosid = data.value;
			//alert(hosid);
			$.ajax({
				type : "post",
				url : "${pageContext.request.contextPath}/userManger/getDivision1",
				data : {hosid:hosid},
				dataType : "json",
				success : function(d) {
					 var tmp = '--请选择--';
					 //改变医院时第三级下拉框回复原样
					 $("#division2").html(tmp);
					 for ( var i in d) {
						 tmp += '' + d[i].divisionName + '';
					}
					 $("#division1").html(tmp);					
					 form.render(); 
				},
				error:function(){
					layer.alert('请求失败，稍后再试', {icon: 5});
				}

			});
		});
		
		//一级科室事件，获取二级科室
		form.on('select(divisionsel)',function(data){
			var division1id = data.value;
			$.ajax({
				type : "post",
				url : "${pageContext.request.contextPath}/userManger/getDivision2",
				data : {division1id:division1id},
				dataType : "json",
				success : function(d) {
					 var tmp = '--请选择--';
					 for ( var i in d) {
						 tmp += '' + d[i].divisionName + '';
					}
					 $("#division2").html(tmp);
					 form.render(); 
				},
				error:function(){
					layer.alert('请求失败，稍后再试', {icon: 5});
				}

			});
			
		});
});

现在附上后台ssm代码

这是controller层代码，service层就贴了，没什么业务逻辑

//根据医院id获取一级科室
	@RequestMapping(value = "/getDivision1", method = RequestMethod.POST )
	@ResponseBody
	public List  getDivision1(String hosid) {	
		List  list = userMangerService.getDivision1(hosid);
		return list;
	}
	
	
	//根据一级科室id获取二级科室
	@RequestMapping(value = "/getDivision2",method = RequestMethod.POST )
	@ResponseBody
	public List  getDivision2(String division1id) {	
		List  list = userMangerService.getDivision2(division1id);
		return list;
	}
	

这是mapper.xml的代码

	    
		
		
	


	    select * from Base_Division 
	    
	       HospitalID = #{hosid,jdbcType=INTEGER} and ParentID = 0
	    
	
	
	
	
	    select * from Base_Division 
	    
	       ParentID = #{division1id}
	    
	
	

你动态加载了layui的表单一定要用form.render()对表单进行更新，

具体api文档查看点击这里——>layui表单