Question

我试图显示通过flask传递到我的网页的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标签作为innerHTML行的一部分，导致语法错误：

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())

Answer 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>

通过HTML表单过滤烧瓶参数

1 个答案: