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>