Flask jinja2 检索下拉列表的值

Posted 2023-03-04

【中文标题】Flask jinja2 检索下拉列表的值

【英文标题】：Flask jinja2 retrieve value of dropdown list

【发布时间】：2022-01-12 06:32:26

【问题描述】：

我正在使用带有 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>

【参考方案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>

【讨论】：

谢谢。但实际上，我想更新一个表条目，而不是一个 p 标签。如果它的

，你能帮忙怎么做吗？ @Gaz赵

也是同样的逻辑，给你的

标签分配一个id，然后用document.getElementById去抓取它，更新它的内部文本。

在本例中，您使用了实际值。我有一本水果字典，但无法使用 selectTag.value 作为索引器访问水果的价格。请查看有问题的更新 这不起作用。你能告诉我如何在 javascript 中访问字典吗？

将变量从 javascript 传递到 jinja 块并不是那么简单，解决问题的一种方法是将价格嵌入选项标签中，并使用 javascript 在 p 标签中显示它基于选择。我更新了答案。