Flask jinja2 检索下拉列表的值

Question

我正在使用带有 Jinja2 模板的 Flask，如何使用 Jinja2 或使用 Java 脚本 + Jinja2 变量从选择框中检索值并使用它？

Python 方面：

@app.route('/')
def dependent():
    fruits= {'apple':100,'orange':80,'mango':200}
    return render_template('select.html',fruits=fruits)

HTML+Jinja2 端

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

<p>fruits[{{fruit}}]</p>

</form>

我想在选择旁边显示所选水果的价格，但我无法检索所选值并使用它。我知道最后的“”标签不正确。如何正确执行此操作？

PS：我对 JS、jQuery 和 Ajax 完全一无所知

更新：

<script>
          var selectTag = document.getElementById('fruit')
          var pTag = document.getElementById('fruit-binding')
          function val() {
            pTag.innerText = fruits[selectTag.value];
        </script>

Answer 1

您可以使用 javascript 尝试类似的操作。一种方法是将您的水果价格添加为选项标签的值，并使用 javascript 将所选项目的此值显示到 p 标签中。

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

  <p id="fruit-binding"></p>
</form>
<script>
  var selectTag = document.getElementById('fruit')
  var pTag = document.getElementById('fruit-binding')
  pTag.innerText = selectTag.value
  function val() {
    pTag.innerText = selectTag.value
  }
</script>