当我们在寄快递选择地址的时候,我们会先选择省,然后选择市,最后选择具体的区,这里就有级联的关系了,同理,楼栋、楼层也是有级联的关系。

在表单中需要两个下拉框来体现,在选择第一个下拉框之后,根据所选的值来对第二个下拉框的数据进行动态的重载。

image-20210724141814023

image-20210724141824604

那么如何实现?

创建表单

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">地点选择</label>
        <div class="layui-input-inline">
            <select name="buildingId" lay-filter="buildingId">
                <option value="">选择教学楼</option>
                <option th:each="building : ${building_list}" th:value="${building.getBid()}" th:text="${building.getBuilding_name()}"></option>
            </select>
        </div>

<div class="layui-input-inline" >
            <select name="floorId" id="floorId">
                <option value="">请先选择教学楼</option>
            </select>
        </div>

</div>

</form>

动态重载

我们监听第一个下拉框的选择,并根据选择向服务器发送Post请求来获取最新的数据

form.on('select(buildingId)', function(data){
    console.log(data.value); //得到被选中的值
    $.post("/location/getfloorbybid/"+data.value,function (res) {
        console.log(res)
        if(res.code == 0){
            console.log(res.data)

            $("#floorId").empty();//清空下拉框的值
            $('#floorId').append(new Option( "选择楼层",""));
            $.each(res.data, function (index, item) {
                console.log(item.fid+ " " + item.floor_name);
                $('#floorId').append(new Option( item.floor_name,item.fid));// 下拉菜单里添加元素
            });
            form.render('select');///重新渲染select
        }else{
            layer.msg(res.message);
        }
    });
});

这里也可以进行自定义时间,比如说根据选择的选项对表格的数据做动态重载。

后端API

@PostMapping("/getfloorbybid/{bid}")
public DataResponse getFloorByBid(@PathVariable Long bid){
   NewBuilding building = newBuildingRepository.findById(bid).orElse(null);

   List<NewFloor> floors = newFloorRepository.findAllByBuildingEquals(building);
   return new DataResponse().success().data(floors).count(newFloorRepository.count());
}

这里的DataResponse是封装好的用来返回layui要求格式的工具类。

微信公众号
最后修改:2021 年 07 月 24 日 02 : 35 PM
如果您觉得我的文章有帮助,请随意赞赏!