Question

现在我有一个由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>```

Answer 1

我发现，只是一些JavaScript需要链接到一个数组，即Django形式的css_classes的'ids'：

<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>

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

1 个答案: