如何在Flask中获取下拉框选中值并渲染另一下拉框？

需求 #

现有Flask项目需要实现：第一个下拉框选择设备后，后端获取选中的设备值，调用接口拉取对应标签数据，自动填充到第二个下拉框，全程无需刷新页面。

原代码问题 #

原代码中submit_device路由是跳转页面的POST请求，无法实现实时无刷新联动；且未正确获取前端传的设备值，调用标签接口时参数为空，需要针对性调整。

1. 修改后端app.py #

新增AJAX接口专门返回标签数据，同时调整初始页面路由：

from flask import Flask, render_template, request, jsonify
import requests

app = Flask(__name__)

# 加载初始页面，渲染设备下拉框
@app.route("/", methods=['GET'])
def index():
    # 调用接口获取设备列表
    devices_res = requests.get("http://10.64.127.94:5000/api/get_platforms")
    devices = devices_res.json()["final_result"]
    return render_template('index.html', devices=devices)

# 处理AJAX请求：根据选中设备返回对应标签
@app.route('/get_labels', methods=['POST'])
def get_labels():
    # 获取前端传递的设备值
    selected_device = request.json.get('device')
    if not selected_device:
        return jsonify([])
    
    # 调用标签接口，传入设备参数
    labels_res = requests.post(
        "http://10.64.127.94:5000/api/get_labels",
        json={"device": selected_device}
    )
    labels = labels_res.json()["final_result"]
    return jsonify(labels)

if __name__ == "__main__":
    app.run(host='127.0.0.1', debug=True, port=5000)

2. 修改前端index.html #

将两个下拉框整合到同一页面，用JS监听设备下拉框的选择变化，通过AJAX请求动态更新标签下拉框：

<!DOCTYPE html>
<html>
<head>
    <title>设备标签联动</title>
    <!-- 引入jQuery简化AJAX操作 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <div>
        <label>选择设备：</label>
        <select id="device-select">
            <option value="">请选择设备</option>
            {% for device in devices %}
            <option value="{{ device }}">{{ device }}</option>
            {% endfor %}
        </select>
    </div>

    <div style="margin-top: 15px;">
        <label>选择标签：</label>
        <select id="label-select">
            <option value="">请先选择设备</option>
        </select>
    </div>

    <script>
        // 监听设备下拉框的选择事件
        $('#device-select').change(function() {
            const selectedDevice = $(this).val();
            const labelSelect = $('#label-select');

            // 未选择设备时，重置标签下拉框
            if (!selectedDevice) {
                labelSelect.html('<option value="">请先选择设备</option>');
                return;
            }

            // 发送AJAX请求获取标签数据
            $.ajax({
                url: '/get_labels',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({device: selectedDevice}),
                success: function(labels) {
                    // 清空标签下拉框，添加新选项
                    labelSelect.empty();
                    labelSelect.append('<option value="">请选择标签</option>');
                    labels.forEach(label => {
                        labelSelect.append(`<option value="${label}">${label}</option>`);
                    });
                },
                error: () => {
                    labelSelect.html('<option value="">加载标签失败</option>');
                }
            });
        });
    </script>
</body>
</html>

3. 方案说明 #

• 采用AJAX无刷新请求，避免页面跳转，提升用户体验；
• 后端新增get_labels接口专注处理标签数据请求，返回JSON格式数据便于前端直接解析；
• 前端监听下拉框change事件，选择设备后立即触发请求，自动更新第二个下拉框内容。

内容的提问来源于stack exchange，提问作者Akshay J