Flask表单下拉选择框如何动态预选中用户提交的所选值

别硬编码写死selected属性就行，换成根据后端传过来的当前选中值动态判断的逻辑，不管是首次打开页面，还是用户提交完表单重渲染，选中状态都能和用户的操作保持一致。

第一步：改后端路由 #

在Flask的路由处理里，把用户提交的下拉框选项值提取出来传给模板；如果是第一次打开页面的GET请求（用户还没提交过表单），就用原来的默认值兜底。
示例代码：

from flask import Flask, render_template, request

app = Flask(__name__)
# 你原本定义的可选年份列表
years = [2020, 2021, 2022, 2023, 2024]

@app.route('/', methods=['GET', 'POST'])
def index():
    # 先设成默认选中值
    selected = 'years'
    if request.method == 'POST':
        # 拿到用户实际提交的选择，覆盖默认值
        submitted_choice = request.form.get('year')
        if submitted_choice:
            selected = submitted_choice
    
    # 把当前选中值和原有年份列表一起传给模板
    return render_template(
        'index.html',
        selected=selected,
        years=years
    )

第二步：改模板里的下拉框 #

把原来硬写的selected全删掉，给每个选项加动态判断：只要选项的value和后端传来的selected值对得上，就自动加上selected标记。
改完的下拉框代码：

<select class="form-control" id="year" name="year">
    <option value="years" {% if selected == 'years' %}selected{% endif %}>years</option>
    <option value="quarters" {% if selected == 'quarters' %}selected{% endif %}>quarters</option>
    {% for year in years %}
        <option value="{{ year }}" {% if selected == year|string %}selected{% endif %}>{{ year }}</option>
    {% endfor %}
</select>

实操注意事项 #

• 注意类型不匹配的坑：表单提交后从request.form拿到的所有值都是字符串类型，如果你的years列表存的是整数格式的年份，直接做相等判断会因为类型不一样导致选中状态失效，代码里用|string过滤器把循环出的年份转成字符串再对比，就能解决这个问题
• 一定要加兜底逻辑：如果遇到用户传了不存在的选项值（比如手动改了前端表单的提交值），记得把选中值切回默认选项，避免出现下拉框没有任何预选项的情况

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