时间戳

首页 > 解决方案 > 带有动态 Jinja HTML 的动态 querySelector

javascript - 带有动态 Jinja HTML 的动态 querySelector

问题描述

我有根据字典中的值动态呈现的表单。根据键值给它们一个 ID。它们最初都是隐藏的。

<div id="subforms" style="display: none" >
  {%for k, v in options.items() %}
    <h3>{{k}}:</h3> 
    <form id= "{{k}}">
    {% for option in v %}
      <label>{{option}}</label>
      <input type="checkbox" name="{{option}}_enabled">
    {% endfor %}
    </form>
  {% endfor %}
</div>

我现在使用这些相同的键创建一个输入列表：

<form action="/action_page.php">
  <input list="tables" id="tablelist" >
    <datalist id="tables">
    {% for key in options.keys() %}
      <option value={{key}}>
    {% endfor %}
    </datalist>
</form>

最后，我使用 Javascript 来监听 tablelist 元素并根据 inputlist 的值选择一个表单。

const tables = document.getElementById("tablelist")
const subform_block = document.getElementById("subform_display")
const forms = document.getElementById("subforms")

tables.oninput = () => {
  let form = 
  forms.querySelector('form[id="${tables.value}"]');

if(form){
    subform_block.innerHTML = form.outerHTML;
} 
else {
    subform_block.innerHTML = "not found";
}
 }

查询选择器不工作。我确认 HTML 已正确呈现且 ID 一致，但我的 querySelector 无法找到任何表单。怎么了？

标签： javascriptpythonhtmljinja2

解决方案

改变：

let form = forms.querySelector('form[id="${tables.value}"]');

到：

document.querySelector('form[id=' + tables.value + ']');

它有效。不知道为什么 ${tables.value} 没有被正确识别

推荐阅读