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插件