如何使用下拉值过滤django中显示的元素列表答案

【问题标题】：How to filter a list of displayed elements in django with a dropdown value如何使用下拉值过滤django中显示的元素列表
【发布时间】：2019-12-01 20:23:51
【问题描述】：

现在我有一个 Django 显示的表单列表：

{% for form in forms %}
  <form method="post" class="{{ form.css_class }}"novalidate>
    {% csrf_token %}
    {% include 'bs4_form.html' with form=form %}
    <input type="hidden" name="selected_form" value="{{ forloop.counter0 }}">
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
{% endfor %}

我还在表单上方呈现了一个下拉列表：

<label>Choose a component to modify:
  <select class="rule-component" name="component">
    <option value="">Select One …</option>
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
</label>

我的问题是，如何在进入页面时不显示任何表单，而在选择时显示与下拉值对应的单个表单？

我尝试过使用 JavaScript，但我对它不是很熟悉，我不确定如何让它与 django 模板语言交互。下面的代码允许我通过将它与 forloop.counter 链接来记录我想要显示的表单元素：

<script type="text/javascript">
const formElement = document.querySelector(".rule-component")

formElement.addEventListener('change', (event) => {
  const selectElement = document.querySelector("form input[value='" + formElement.value + "']").parentNode;
  console.log(selectElement)
  const result = document.querySelector('.result');
  result.textContent = `You like ${selectElement.className}`;
});
</script>```

【问题讨论】：

标签： javascript python django

【解决方案1】：

我想通了，只是一些 JavaScript 需要链接到一个数组，'ids' 与 Django 表单中的 css_classes：

<script type="text/javascript">
const ids=["jira-label", "label-rule-category"]
const dropDown = document.getElementById("rule-component");

dropDown.onchange = function() {
  for(var x = 0; x < ids.length; x++) {
    console.log(ids[x])
    document.getElementById(ids[x]).style.display = "none";
  }
  console.log(this.value)
  document.getElementById(this.value).style.display = "block";
}
</script>

【讨论】：