Layui框架的select下拉框实现二级联动
岁月悠悠,衰微只及肌肤;热忱抛却,颓唐必致灵魂
使用场景:
🏥 医院信息管理:
一级下拉框:所有科室
二级下拉框:每个科室的床号
效果:
下拉框html代码:
<div class="layui-form-item">
<label class="layui-form-label">所在科室</label>
<div class="layui-input-inline">
<select name="room" id="room" lay-filter="room">
<option value="">请选择患者所在科室</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">床号</label>
<div class="layui-input-inline">
<select name="bedNo" id="bedNo">
<option value="">请输入患者床号</option>
</select>
</div>
</div>
JavaScript实现代码:
layui.use(['form','laydate'], function () {
// layui引入需要的组件
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
// 二级联动 第一步 渲染父级
$.ajax({
url: '/room/getRoomName', // 后台取到所有的科室名称
dataType: 'json',
type: 'get',
success: function (resData) {
$.each(resData.data, function (index, value) {
// 这里的 value.roomName
// 前者是页面显示的值,后者是传递给后台的值。
// 正常情况下,后者应该是 value.id
$('#room').append(new Option(value.roomName, value.roomName)); // 下拉菜单里添加元素
});
//渲染select
form.render('select');
}
});
// 第二步 监听父级,每当父级发生变化时,渲染子级的值
form.on('select(room)', function(data){
var roomName = data.value; // roomName 选中的科室名称
$.ajax({
url: '/room/getBedNo',
dataType: 'json',
type: 'post',
data: {roomName:roomName}, // 传入科室名称,查找该科室的所有床号
success: function (resData) {
// 清空床号
$('#bedNo').empty();
$.each(resData.data, function (index, value) {
// 这里的 value.bedNo
// 前者是页面显示的值,后者是传递给后台的值。
// 正常情况下,后者应该是 value.id
$('#bedNo').append(new Option(value.bedNo, value.bedNo));// 下拉菜单里添加元素
});
//渲染select
form.render('select');
}
});
});
});
后端代码:
实体类:
@Data
@TableName("room")
public class Room {
private Integer id;
private String roomName; // 科室名称
private Integer pid; // 病人id
private Integer bedNo; // 该科室下床号
}
响应体格式(把返回的对象放在ResponseResult的data中):
@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder(toBuilder = true)
public class ResponseResult<T> {
private int code; // 0:success 1:failure
private String msg; // 返回信息
private int count; // 总记录数
private List<T> data;
}
第一步:获取所有科室名称:
@RequestMapping("/getRoomName")
@ResponseBody
public ResponseResult<Room> getRoomName(){
// 获取所有科室名称
// select DISTINCT roomName from room
List<Room> roomNameList = roomMapper.getRoomName();
ResponseResult<Room> result = new ResponseResult<>();
result.setData(roomNameList);
return result;
}
result如下:
ResponseResult(code=0, msg=null, count=0,
data=[Room(id=null, roomName=消化内科, pid=null, bedNo=null),
Room(id=null, roomName=肾脏内科, pid=null, bedNo=null),
Room(id=null, roomName=血管外科, pid=null, bedNo=null)])
第二步:获取该科室下所有床号:
@RequestMapping("/getBedNo")
@ResponseBody
public ResponseResult<Room> getBedNo(Room room){
// 前端传过来的科室名称
String roomName = room.getRoomName();
// 根据科室名称查找该科室下所有床号
// select * from room where roomName = #{roomName}
List<Room> roomList = roomMapper.getBedNo(roomName);
ResponseResult<Room> result = new ResponseResult<>();
result.setData(roomList);
return result;
}
例:选择肾脏内科,得到该科室下所有床号,result如下:
ResponseResult(code=0, msg=null, count=0,
data=[Room(id=8, roomName=肾脏内科, pid=0, bedNo=1),
Room(id=9, roomName=肾脏内科, pid=0, bedNo=2),
Room(id=10, roomName=肾脏内科, pid=0, bedNo=3),
Room(id=12, roomName=肾脏内科, pid=0, bedNo=5),
Room(id=13, roomName=肾脏内科, pid=0, bedNo=6)])
总结:
⭐:1. 进入页面即加载一级下拉框的所有值
⭐:2. 使用Layui的lay-filter方法监听一级下拉框的值的变化,再次使用ajax方法获取所有相应的二级内容并进行展示。
⭐:3. 需要安装lombok插件
野花太放肆: 感谢指出,已更正
「已注销」: 哈喽博主,有几处问题,麻烦博主修改一下 1、进度管理 第二项是定义活动 2、资源管理 第六项是控制资源 3、干系人管理 第二项是规划干系人参与
Isabella_meng: 非常感谢,提供了很大的便利。
Isabella_meng: 希望今年我们都能过,跟楼主一起加油。
野花太放肆: 没有,我论文是合同那一批。