根据 jinja2 / flask 中的 <select> 动态更改 <textarea>答案

【问题标题】：Dynamically change <textarea> depending on <select> in jinja2 / flask根据 jinja2 / flask 中的 <select> 动态更改 <textarea>
【发布时间】：2020-03-09 11:09:16
【问题描述】：

在我的 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 代码和变体的位置，但还没有弄清楚，请帮忙。

【问题讨论】：

标签： python html flask dynamic jinja2

【解决方案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;
}

【讨论】：