通过 HTML 表单过滤烧瓶参数答案

【问题标题】：Filtering flask parameters through HTML form通过 HTML 表单过滤烧瓶参数
【发布时间】：2019-03-09 01:47:38
【问题描述】：

我正在尝试显示从通过烧瓶传递到我的网页的 sql 表中选择的行。选择哪些行取决于从 HTML 下拉列表中选择的值（表中的列之一是 id。我需要 id 对应于表单中所选值的行）：

<form name="dropdownForm" style="padding:10px 0px 0px 20px" onchange="calldropdown(this.value)">
    <select name="dropdownselection" id='dropdownresult'>
        <option value=1>Option 1</option>
        <option value=2>Option 2</option>
        <option value=3>Option 3</option>
       </select>
</form>

目前，我正在将此表单的结果传递给 javascript 函数，但到目前为止，只能显示表单中的选定值，而不是我需要的：

<p id = areatodisplay"></p>
function calldropdown(dropdownresult) {
    var result= document.getElementById('dropdownresult').value
    document.getElementById("areatodiaplsy").innerHTML = result;
}

不过，我需要一些关于从这里去哪里的帮助——我想要的甚至可行吗？每当在下拉列表中进行新选择时，我都需要更改显示的数据，而无需刷新页面 - 因此是 javascript。

我试图在我的 javascript 函数中使用 jinja 标记作为 innerHTMLline 的一部分，导致语法错误：

document.getElementById("areatodiaplsy").innerHTML = {% for i in getInfo %} {% if i.id == result %} {{i.name}} {% endif %} {% endfor %};

为了完整起见，我正在使用的烧瓶代码：

@app.route('/live')
def live():
    return render_template('live.html', getInfo=Info.query.all())

【问题讨论】：

标签： javascript html flask jinja2

【解决方案1】：

试试这个 - 它有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function calldropdown(dropdownresult) {
             document.getElementById("areatodisplay").innerHTML = dropdownresult;
        }

    </script>
</head>
<body>

<select name="dropdownselection" id='dropdownresult' onchange="calldropdown(this.value)">
    <option value=1>Option 1</option>
    <option value=2>Option 2</option>
    <option value=3>Option 3</option>
</select>

<p id="areatodisplay"></p>

</body>
</html>

【讨论】：