Question

我创建了一个需要用户创建模板的Web表单。调用所有以前的模板条目不是问题，但在调用时将信息传递给表单似乎很棘手。基本上我希望用户能够从下拉列表中选择一个模板（参见下面的截图和内容），然后根据他们的选择，更新脚本中的变量以自动填充表单数据。现在，它只选择最近的条目。这可能只是使用python / flask / javascript或我错过了什么？任何帮助，将不胜感激！谢谢！

模板下拉

    <label for="template_select">Select Template</label>
<select class="form-control" name="template_select" id='template_select' onchange='changeTemplate()'>
<option value=''></option>

{% for template_info in template_search %}
<option value='{{template_info.client_name}}'>{{template_info.client_name}}</option>
{% endfor %}

</select>

Javascript更改值

{% for template_info in template_search %}

<script>
function changeTemplate(){
    var template = document.getElementById('template_select').value;
    document.getElementById('client_name').value='{{template_info.client_name}}';
    document.getElementById('client_name').innerHTML='{{template_info.client_name}}';
}
</script>

{% endfor %}

Python在查询中传递

template_search = newmatter_model.NewClientMatter.query.filter_by(
            creator=verifier, is_template='on').all()

Answer 1

你的错误是在循环中创建Javascript代码。你不需要这样做。

您要做的是将发送到浏览器的数据视为独立。没有Flask和Jinja2，首先让它工作。创建一个可以正常工作的静态页面。

以下代码适用于静态数据：

＆＃13;

function changeTemplate(){
    var template = document.getElementById('template_select').value;
    document.getElementById('client_name').innerHTML = template;
}

＆＃13;

<label for="template_select">Select Template</label>
<select class="form-control" name="template_select" id="template_select" onchange="changeTemplate()">
<option value=""></option>

<option value="Client 1">Client 1</option>
<option value="Client 2">Client 2</option>
<option value="Client 3">Client 3</option>
</select>

<div id="client_name"><i>No client set</i></div>

＆＃13;

用于选择框的HTML，单独的<div>元素和用于将所选选项值复制到<div>的Javascript代码。请注意，Javascript代码并不知道涉及哪些数据;代码中不存储任何客户端名称。小函数所做的就是将当前所选选项的值复制到其他地方。

一旦自行运行，您就可以开始考虑如何从应用程序中插入值。在上面的代码中，所有需要替换的都是下拉选项，因为Javascript代码可以从<select>元素值访问所需的所有内容。

因此，无需在所有生成Javascript代码，您只需生成<option>元素，就像您在问题中所做的那样。

您很少需要生成动态的Javascript代码，如果您不这样做，对您的应用来说会更好。静态Javascript代码可以由CDN提供并缓存在浏览器中，从而无需您的应用程序继续为所有客户端一次又一次地提供服务。尽可能地尽量减少这种情况。

相反，只生成代码需要操作的数据。

您可以将该信息放在HTML标记中。在上面的示例中，您的数据会放在重复的<option>标记中。或

您可以添加data attributes to your HTML，它们既可以访问Javascript代码，也可以访问CSS。或

使用AJAX异步加载数据;例如当您在<select>框中选择一个选项时，使用Javascript和AJAX调用Flask服务器上的单独端点，该端点以JSON或现成HTML的形式提供更多数据，然后使用Javascript代码更新您的网页。或

生成JSON数据并将其直接放入HTML页面。只需<script>some_variable_name = {{datastructure|tojson|safe}};<script>部分即可;然后从您的静态Javascript代码访问some_variable_name以在页面上执行有趣的操作。 JSON是Javascript的一个（几乎完全是）子集，tojson过滤器的工作方式可以保证为您生成兼容Javascript的数据结构。浏览器将像任何其他嵌入式Javascript代码一样加载它。

使用Jinja动态更新Javascript变量？

1 个答案: