Jinja2 - 在我的jinja模板中使用javascript变量

Question

我想在我的网页中对选择的元素（HTML SELECT元素）进行动态过滤。

我的第一个列表已经设置好了，我想在第一个选项中更改第二个列表（HTML select元素）的内容。

但要做到这一点，我需要在jinja2中使用document.getElementByid（javascript）的结果作为动态变量，如下所示：

document.getElementById('select02').innerHTML = 
"{% for i in context.get(document.getElementById('select02').value) %}
<option {{'selected' if package == 1 else ''}} value='{{i}}'>{{i}}</option>
{% endfor %}";

要生成页面，我正在使用带有jinja2模板的python脚本。

有人已使用此功能吗？

Answer 1

假设context是一个词典，你必须通过JSON把它的所有内容放到你的页面中。然后你需要编写javascript函数来1）获取用户为第一个列表选择的内容（list表示这里的html select元素）2）使用1）中的值来更新第二个列表。使用javascript事件，最好是在第一个列表的每个用户交互（更改，单击）上触发。

记住，你不能将服务器端代码（jinja2模板）与客户端代码（javascript）混合在一起！