Flask如何实现选中SelectField选项后无刷新填充输入字段

完全可以不刷新页面完成表单联动填充，核心实现逻辑是监听下拉框的交互事件，通过异步请求获取对应数据后直接赋值给目标输入框即可，不需要整页重载。

1. 后端代码修改（app.py） #

新增专门返回选中项对应详情的接口，用于响应前端的异步请求，同时修正原代码中SelectField选项赋值的格式问题：

from flask import Flask, render_template, request, jsonify
# 其余原有导入保持不变

@app.route("/", methods=['GET', 'POST'])
def index():
    test = ["1", "2", "3"]
    form1 = Form1()
    # SelectField的choices要求传入(值, 显示文本)的二元组列表
    form1.select.choices = [(v, v) for v in test]
    form2 = Form2()
    return render_template('index.html', form1=form1, form2=form2)

# 新增异步获取详情的接口
@app.route("/get_detail", methods=["POST"])
def get_detail():
    select_val = request.json.get("select_val")
    # 此处可替换为实际业务逻辑，比如从数据库查询对应选中值的详情
    detail_map = {
        "1": {"field1": "选项1对应的详情内容"},
        "2": {"field1": "选项2对应的详情内容"},
        "3": {"field1": "选项3对应的详情内容"}
    }
    return jsonify(detail_map.get(select_val, {"field1": ""}))

2. 前端模板修改（index.html） #

给表单元素添加唯一ID方便定位，通过原生JS实现交互逻辑，无需引入外部依赖：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单联动示例</title>
</head>
<body>
    <form id="form1">
        {{ form1.select(size="30", id="select-test") }}
        <!-- 不需要点击触发填充可以删掉下面的按钮 -->
        <button type="button" id="get-data-btn">{{ form1.submit.label.text }}</button>
    </form>
    <form id="form2" action="" method="post">
        {{ form2.field1.label }}
        {{ form2.field1(id="field1-input") }}
        {{ form2.submit }}
    </form>

    <script>
        // 两种触发方式选其一即可
        // 方式1：选中下拉选项后自动填充
        document.getElementById('select-test').addEventListener('change', function() {
            fillField(this.value);
        });

        // 方式2：点击Get Data按钮后才触发填充
        document.getElementById('get-data-btn').addEventListener('click', function() {
            const selectVal = document.getElementById('select-test').value;
            fillField(selectVal);
        });

        // 通用填充函数
        function fillField(selectVal) {
            if (!selectVal) return;
            fetch('/get_detail', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    // Flask-WTF默认开启CSRF校验，必须传递该字段，关闭CSRF可删除此行
                    'X-CSRFToken': '{{ csrf_token() }}'
                },
                body: JSON.stringify({select_val: selectVal})
            })
            .then(res => res.json())
            .then(data => {
                document.getElementById('field1-input').value = data.field1;
            })
            .catch(err => console.error('请求出错:', err));
        }
    </script>
</body>
</html>

补充说明 #

• 后端返回的JSON可以同时包含多个字段的值，赋值时对应给多个输入框赋值即可实现多字段联动填充
• 如果关闭了Flask-WTF的CSRF校验，直接删除请求头里的X-CSRFToken字段即可

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