如何在Jinja2中捕获下拉框选中值并传递给Flask视图函数？

问题根源 #

1. 下拉框未包含在表单内部，导致提交表单时无法携带选中的时间值
2. 表单action中的time=time是Jinja2渲染时循环的最后一个time变量值，并非用户实时选中的选项

方案1：纯HTML表单+后端参数适配（无需JS） #

利用HTML表单原生提交机制，把下拉框嵌入表单内，通过GET请求传递参数。

修改timeSelect.jinja

<form method="get" action="{{ url_for('showTime') }}">
  <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" name="time">
    <option selected disabled>Select Monitoring Time</option>
    {% for time in times %}
    <option value="{{ time }}">{{ time }} hours</option>
    {% endfor %}
  </select>   
  <button type="submit" class="btn btn-primary">submit</button>
</form>

修改app.py的showTime路由

调整路由以接收查询参数：

from flask import request

@app.route("/showTime")
def showTime():
    # 获取表单提交的time参数并转为整数
    selected_time = request.args.get('time', type=int)
    return render_template("showtest.jinja", time=selected_time)

方案2：保留原path路由，用JS动态修改表单action #

如果想继续使用/showTime/<int:time>的路径格式，通过JavaScript监听下拉框变化，动态修改表单提交地址。

修改timeSelect.jinja

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" id="timeSelect">
  <option selected disabled>Select Monitoring Time</option>
  {% for time in times %}
  <option value="{{ time }}">{{ time }} hours</option>
  {% endfor %}
</select>   

<form method="get" id="timeForm" action="">
  <button type="submit" class="btn btn-primary">submit</button>
</form>   

<script>
const timeSelect = document.getElementById('timeSelect');
const timeForm = document.getElementById('timeForm');

// 监听下拉框选择事件
timeSelect.addEventListener('change', function() {
  const selectedVal = this.value;
  // 基于Jinja2生成的基础URL替换time参数
  const baseUrl = "{{ url_for('showTime', time=0) }}";
  timeForm.action = baseUrl.replace('0', selectedVal);
});
</script>

保留app.py原路由不变

@app.route("/showTime/<int:time>")
def showTime(time):
    return render_template("showtest.jinja", time=time)

关于Jinja2原生解决方案的说明 #

Jinja2是服务端模板引擎，仅负责页面渲染前的静态内容生成，无法处理浏览器端的实时用户交互（比如下拉框选中值的动态变化）。因此不存在纯Jinja2的解决方案，必须结合HTML表单或JavaScript实现参数传递。

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