二级联动（下拉框获取数据）

一、介绍
注： （从数据库中获取值）
加载页面后直接获取第一个下拉框的数据，当选择值后，查询该数值相匹配的数据，放到第二个下拉框中，效果图如下：

二、代码展示
1、HTML代码：

<div class="layui-form-item">
    <label class="layui-form-label">公寓</label>
    <div class="layui-input-inline" style="width: 100px">
        <select name="selectBuilding" style="width: 100px;height: 30px;margin-top: 5px;text-align: center">
            <option value="">请选择公寓</option>
        </select>
    </div>
    <label class="layui-form-label" style="width: 40px">宿舍</label>
    <div class="layui-input-inline" style="width: 100px">
        <select name="selectDormitory" style="width: 100px;height: 30px;margin-top: 5px;text-align: center">
            <option value="">请选择宿舍</option>
        </select>
    </div>
</div>

2、js代码：
第一个下拉框加载页面直接获取数据，当第一个下拉框发生改变后，执行第二个下拉框的Ajax，获取相对应的数据

参数解析：
以下两个ajax，分别对应两个表的查询
> 第一个ajax：
buildingId 是后端传过来的数据集合中的对象id值，可以是表数据中的主键id，作为下拉框的value；
buildingName 是后端传过来的数据集合中的对象name值，可以是表数据中的name属性的参数值，作为下拉框的展示数据；
> 第二个ajax：
dormitoryId ：原理同上
dormitoryName ：原理同上

<script>
		$.ajax({
            type: 'post',
            url: 'findAllBuilding',
            dataType: 'json',
            data: {},
            success: function (data) {
                console.log(data);//使用console.log()方法来找到对象的内容
                $.each(data, function (i) {
                    var trString = " <option value='" + data[i].buildingId + "'>" + data[i].buildingName + "</option>";
                    $("[name='selectBuilding']").append(trString);
                });
            }
        });
        
        $("[name='selectBuilding']").change(function () {
            $.ajax({
                type: 'post',
                url: 'findAllDormitory',
                dataType: 'json',
                data: {
                    buildingId: $("[name='selectBuilding']").val()
                },
                success: function (data) {
                    $("[name='selectDormitory']").html("");
                    console.log(data);//使用console.log()方法来找到对象的内容
                    $.each(data, function (i) {
                        var trString = " <option value='" + data[i].dormitoryId + "'>" + data[i].dormitoryName + "</option>";
                        $("[name='selectDormitory']").append(trString);
                    });
                }
            });
        });
</script>

三、后端思路解析

1. 定义两个查询接口（接口路径分别是：findAllBuilding、findAllDormitory）
2. findAllBuilding接口：调用查询一级下拉框数据（也就是上图中的 公寓下拉框的数据）的方法，简单点就是，去公寓表中，查询一个list集合数据；
3. findAllDormitory接口：根据一级下拉框选择的值（buildingId的值），调用查询符合选择值的二级下拉框数据（也就是上图中的 宿舍下拉框的数据）的方法，简单点理解就是，根据一级下拉框的选择值去宿舍表查询符合条件的list集合数据
4. 表结构解析（按自己实际表结构需求进行实现，这里只做参考思路）
   公寓表：字段有（buildingId（主键id）、buildingName （公寓名称））
   宿舍表：字段有（dormitoryId （主键id）、dormitoryName （宿舍名称）、buildingId（关联公寓表的主键id））

四、结束
这是最主要的代码，其他代码就不展示了！
时间过长，代码遗失，无法补全后端查询源码，还请理解，上面列出实现思路，请参考！