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

最新推荐文章于 2024-09-26 16:43:06 发布

wskfly

最新推荐文章于 2024-09-26 16:43:06 发布

阅读量7.5k

点赞数 3

分类专栏： layui JAVA

本文链接：https://blog.csdn.net/wskfly/article/details/86477425

版权

JAVA 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

layui

2 篇文章 0 订阅

订阅专栏

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

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

直接附上代码吧，

<body>
	<div class="x-body">
		<form class="layui-form" id="auf">
			<input type="hidden" name="id" value="${user.id }" id="id" />
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="name" required lay-verify="required"
						placeholder="请输入姓名" autocomplete="off" class="layui-input"
						value="${doctor.name}">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性別</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="0" title="男"
						<c:if test="${doctor.sex==0}">checked</c:if>> <input
						type="radio" name="sex" value="1" title="女"
						<c:if test="${doctor.sex==1}">checked</c:if>>
				</div>
			</div>
			<!--联动框  -->
			<div class="layui-form-item">
				<label class="layui-form-label">医院</label>
				<div class="layui-input-inline">
					<select name="quiz1" lay-filter="hospitalsel">
						<option value="">--请选择--</option>
						<c:forEach items="${listhos}" var="item">
							<option value="${item.id }" >${item.hospitalName}</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">科室</label>
				<div class="layui-input-inline">
					<select name="division1" lay-filter="divisionsel" id="division1">
						<option value="">--请选择--</option>

					</select>
				</div>
				<div class="layui-input-inline">
					<select name="division2" id="division2">
						<option value="">--请选择--</option>

					</select>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">职称</label>
				<div class="layui-input-block">
					<input type="text" name="job" required lay-verify="required"
						placeholder="请输入职称" autocomplete="off" class="layui-input"
						value="${doctor.job}">
				</div>
			</div>




			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="updateDoctor">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</body>

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

下面就是三级框联动的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 = '<option value="">--请选择--</option>';
					 //改变医院时第三级下拉框回复原样
					 $("#division2").html(tmp);
					 for ( var i in d) {
						 tmp += '<option value="' + d[i].id +  '">' + d[i].divisionName + '</option>';
					}
					 $("#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 = '<option value="">--请选择--</option>';
					 for ( var i in d) {
						 tmp += '<option value="' + d[i].id +  '">' + d[i].divisionName + '</option>';
					}
					 $("#division2").html(tmp);
					 form.render(); 
				},
				error:function(){
					layer.alert('请求失败，稍后再试', {icon: 5});
				}

			});
			
		});
});

现在附上后台ssm代码

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

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

这是mapper.xml的代码

<resultMap type="com.eyou.esd.entity.Division" id="DivResultMap">
	    <id column="ID" property="id" jdbcType="INTEGER" />
		<result column="ParentID" property="parentID" jdbcType="INTEGER" />
		<result column="DivisionName" property="divisionName" jdbcType="VARCHAR" />
	</resultMap>

<select id="getDivision1" parameterType="java.lang.String" resultMap="DivResultMap">
	    select * from Base_Division 
	    <where>
	       HospitalID = #{hosid,jdbcType=INTEGER} and ParentID = 0
	    </where>
	
	</select>
	
	<select id="getDivision2" parameterType="java.lang.String" resultMap="DivResultMap">
	    select * from Base_Division 
	    <where>
	       ParentID = #{division1id}
	    </where>
	
	</select>

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

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