Flask jinja2 检索下拉列表的值

Question

I'm using Flask with Jinja2 templates, how can I retrieve value from a select box using Jinja2 or using Java script + Jinja2 variable and use it?

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>

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

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

Answer 1

您可以使用 javascript 尝试类似的操作。

<form>
<select onchange="val()" name="fruit" id="fruit">
        <option value="apple">apple</option>
        <option value="orange">orange</option>
</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>