下拉框二级联动数据库

下拉框二级联动数据库的实现需要前端和后端的配合，前端需要通过JavaScript监听第一个下拉框的变化事件，然后向后端发送Ajax请求获取第二个下拉框的数据。后端需要提供两个接口，一个用于获取第一个下拉框的数据，另一个用于根据第一个下拉框的选择值获取第二个下拉框的数据。

以下是一个简单的实现思路：

1.前端代码：

<!-- 第一个下拉框 -->
<select id="building">
  <option value="">请选择公寓</option>
  <!-- 动态添加选项 -->
</select>

<!-- 第二个下拉框 -->
<select id="dormitory">
  <option value="">请选择宿舍</option>
  <!-- 动态添加选项 -->
</select>

<script>
  // 监听第一个下拉框的变化事件
  document.getElementById('building').addEventListener('change', function() {
    // 获取选择的值
    var buildingId = this.value;
    // 发送Ajax请求获取第二个下拉框的数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/findAllDormitory?buildingId=' + buildingId);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 解析返回的数据
        var dormitories = JSON.parse(xhr.responseText);
        // 清空第二个下拉框的选项
        var dormitorySelect = document.getElementById('dormitory');
        dormitorySelect.innerHTML = '<option value="">请选择宿舍</option>';
        // 动态添加选项
        dormitories.forEach(function(dormitory) {
          var option = document.createElement('option');
          option.value = dormitory.dormitoryId;
          option.textContent = dormitory.dormitoryName;
          dormitorySelect.appendChild(option);
        });
      }
    };
    xhr.send();
  });
</script>

2.后端代码：

# 定义两个接口
@app.route('/findAllBuilding')
def find_all_building():
    # 查询公寓表获取数据
    buildings = Building.query.all()
    # 将数据转换为字典列表
    building_list = [{'buildingId': building.buildingId, 'buildingName': building.buildingName} for building in buildings]
    # 返回数据
    return jsonify(building_list)

@app.route('/findAllDormitory')
def find_all_dormitory():
    # 获取一级下拉框的选择值
    building_id = request.args.get('buildingId')
    # 根据选择值查询宿舍表获取数据
    dormitories = Dormitory.query.filter_by(buildingId=building_id).all()
    # 将数据转换为字典列表
    dormitory_list = [{'dormitoryId': dormitory.dormitoryId, 'dormitoryName': dormitory.dormitoryName} for dormitory in dormitories]
    # 返回数据
    return jsonify(dormitory_list)