Question

我有基于字典中的值动态呈现的表单。根据键值给出一个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元素并根据输入列表的值选择一个表单。

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";
}
 }

querySelector不起作用。我确认HTML是正确呈现的并且ID是一致的，但是我的querySelector无法找到任何表单。有什么问题？

Answer 1

更改：

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

为：

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

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

动态查询选择器与动态Jinja HTML

1 个答案: