Flask搭配Jinja2模板如何获取下拉框选中值并展示对应水果价格

问题本质 #

Jinja2是服务端渲染模板，仅在页面首次加载时执行一次渲染，用户在浏览器中操作下拉框的行为属于前端交互，必须通过少量JS实现动态更新，无需使用复杂的Ajax或jQuery。

你之前代码的错误点：

• 展示价格的<p>标签未添加id="fruit-binding"，JS无法定位到要更新的元素
• 未将后端传入的fruits字典转换为前端JS可识别的对象，JS读取不到对应的水果价格数据
• 未给下拉框绑定选中变化事件，选中后不会触发更新逻辑，同时JS函数未补全闭合

完整可运行模板代码 #

<form>
<select name="fruit" id="fruit" onchange="val()">
    {% for fruit in fruits.keys() %}
        <option value="{{ fruit }}"> {{ fruit }} </option>
    {% endfor %}
</select>

<p id="fruit-binding"></p>

</form>

<script>
// 将后端传入的水果字典转换为前端JS可识别的对象
const fruits = {{ fruits|tojson }};
const selectTag = document.getElementById('fruit');
const pTag = document.getElementById('fruit-binding');

function val() {
  pTag.innerText = fruits[selectTag.value];
}

// 页面加载完成后自动触发一次，展示默认选中的水果价格
window.onload = val;
</script>

代码说明 #

• 用Jinja2自带的tojson过滤器直接将Python字典转换为JS对象，无需额外处理数据格式
• 给下拉框添加了onchange="val()"属性，每次选中水果时会自动更新价格显示
• 页面加载完成后自动触发一次更新逻辑，默认展示第一个选中水果的价格

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