选择选项时，我想更改其他选择标签选项

Question

在我的Django模板中，我有两个选择标签。我想更改第二个标签以链接到第一个标签。例如，当在第一个标签动物选项中选择时，我想在第二个选择标签上显示动物。当植物在第一个标签中选择时，我想在第二个选择标签中展示植物。我该怎么做？

       (animals or plants)
      <select id="creatures">
        {% for x in list %}

          <option value="{{x.creature}}">{{x.creature}}</option>

        {% endfor %}
      </select>



          <select id="instances">

            {% for y in instances %}

              <option value="{{y.instance}}">{{x.instance}}</option>

            {% endfor %}
          </select>

Answer 1

有多种方法。

这是您可以采用的一种方法：

/a>

document.getElementById("first").addEventListener("change", (e) => {
  const selectedOption = e.target.value;

  // update second select based on what is selected
  document.getElementById("second").innerHTML = getSecondSelectOptions(
    selectedOption
  );
});

function getSecondSelectOptions(category) {
  const animals = ["cat", "dog", "bird"];
  const plants = ["lily", "lotus"];
  if (category === "animals")
    return animals
      .map((value) => `<option value="${value}">${value}</option>`)
      .join("");
  else if (category === "plants")
    return plants
      .map((value) => `<option value="${value}">${value}</option>`)
      .join("");
  else return ""; // clear second select
}

我们使用innerhtml更新第二个选择的内容。

另一种方法是在静态上写下不同的选择元素，但默认情况下隐藏。然后，您可以根据第一个选择中选择的选项来解开所需的选择元素。

希望它有帮助。