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插件
layui实现下拉框二级联动比较简单,你可以通过监听第一个下拉框的 change 事件,在事件回调函数中动态加载第二个下拉框的数据。 首先,需要在页面中引入 layui 的相关资源文件。然后,定义两个 select 元素,分别代表第一个和第二个下拉框。 ```html <!-- 引入 layui 的相关资源文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/css/layui.css"> <script src="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/layui.js"></script> <!-- 定义第一个下拉框 --> <select id="select1" lay-filter="select1"> <option value="">请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> <!-- 定义第二个下拉框 --> <select id="select2" lay-filter="select2"> <option value="">请选择</option> </select> ``` 接下来,初始化 layui 并监听第一个下拉框的 change 事件。 ```javascript <script> layui.use(['form'], function(){ var form = layui.form; // 监听第一个下拉框的 change 事件 form.on('select(select1)', function(data){ var value = data.value; // 获取选中的值 // 根据选中值加载第二个下拉框的数据 loadSelect2Data(value); }); // 加载第二个下拉框的数据 function loadSelect2Data(value) { // 根据选中值发送异步请求获取数据 // 假设根据选中值 value 获取到的数据为 data var data = [ {value: '11', text: '选项11'}, {value: '12', text: '选项12'}, {value: '13', text: '选项13'} ]; var select2 = document.getElementById('select2'); select2.innerHTML = ''; // 清空第二个下拉框的选项 // 动态添加选项 data.forEach(function(item){ var option = document.createElement('option'); option.value = item.value; option.innerText = item.text; select2.appendChild(option); }); // 重新渲染第二个下拉框 form.render('select'); } }); </script> ``` 这样,当第一个下拉框的选中值发生改变时,就会触发 change 事件回调函数,动态加载第二个下拉框的数据。请根据实际需求修改 loadSelect2Data 函数中的异步请求部分,以获取正确的数据。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值