如何在Flask的app.py中编写逻辑控制index.html文本框内容

要在Flask后端处理下拉框选择逻辑并更新文本框内容，你需要调整路由逻辑、表单结构以及模板渲染方式，具体步骤如下：

1. 修改app.py代码 #

导入request获取表单提交数据，统一处理页面加载和表单提交请求：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
def index():
    colours = ["Red", "Blue", "Black", "Orange"]
    selected_text = ""
    # 处理表单提交请求
    if request.method == "POST":
        selected_colour = request.form.get("colours")
        if selected_colour == "Red":
            selected_text = "You have selected the item Red"
    # 传递颜色列表和提示文本给模板
    return render_template('index.html', colours=colours, selected_text=selected_text)

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

2. 修改index.html代码 #

合并表单，让下拉框选择时自动提交请求，同时将文本框内容绑定到后端传递的变量：

<form action="/" method="POST">
    <select name="colours" onchange="this.form.submit()">
        {% for colour in colours %}
            <option value="{{ colour }}" {% if colour == request.form.get('colours') %}selected{% endif %}>
                {{ colour }}
            </option>
        {% endfor %}
    </select>
    <input type="text" name="result" value="{{ selected_text }}" readonly />
</form>

逻辑说明 #

• 后端index路由同时处理GET和POST请求：GET请求加载页面时，selected_text为空，文本框显示空白；POST请求（下拉框选择触发）时，获取选中的颜色，判断为Red则生成对应提示文本。
• 下拉框通过onchange="this.form.submit()"实现选择即提交，无需额外按钮。
• 下拉框的选中状态根据上次提交的值保留，避免每次刷新后重置选中项。
• 文本框设置readonly防止手动修改，内容完全由后端返回的selected_text控制。

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