根据jinja2/flas中的<select>动态更改<textarea>

Question

在我的python文件中，我有一本字典 results = {'Key1':'Value1', 'Key2':'Value2'}。我通过了return render_template('pages/queries.html', results=results)

现在在html中

    <select name="results">
        {% for key, value in results.items() %}
        <option value="{{ key }}">{{ key }}</option>
        {% endfor %}
    </select>
    {% for value in results.values() %}
    <textarea rows="10" cols="40" name="results"> {{value}} </textarea>
    {% endfor %}

不幸的是，由于某些原因，它显示了三个文本区域。我想要的结果是有人从下拉列表（选择html）中选择一个值，如果他们选择“key2”，那么我希望“value2”出现在textarea中。如果他们选择“key1”，那么动态地我希望textarea更新为“value1”。但这没有发生，我尝试更改所有jinja代码和变体的位置，但还没有找到，请帮助。你知道吗

Answer 1

您需要添加onChange事件处理程序并相应地更新文本区域。你知道吗

    <select name="results" onchange="changeText(this);">
        {% for key, value in results.items() %}
        <option value="{{ value }}">{{ key }}</option>
        {% endfor %}
    </select>
    <textarea rows="10" cols="40" name="results" id="myTextArea"> {{results.values()[0]}} </textarea>

用于在onChange事件上更新文本区域的JS代码。你知道吗

function changeText(el) {
    document.getElementById('myTextArea').value = el.value;
}