二級聯動（下拉框獲取數據）

一、介紹
注： （從數據庫中獲取值）
加載頁面後直接獲取第一個下拉框的數據，當選擇值後，查詢該數值相匹配的數據，放到第二個下拉框中，效果圖如下：

二、代碼展示
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，獲取相對應的數據

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

三、結束
這是最主要的代碼，其他代碼就不展示了！！