Когда опция выбрана, я хочу изменить другие опции тегов выбора

В моем шаблоне Django есть два тега select. Я хочу изменить второй тег так, чтобы он был связан с первым. Например, когда в первом теге выбирается опция animals, я хочу показывать животных во втором теге select. Например, при выборе растений в первом теге я хочу показывать растения во втором теге. Как я могу это сделать? 

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

Есть несколько способов.

Вот один из подходов, который вы можете использовать:

Попробуйте в CodeSandbox

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
}

Мы обновляем содержимое второго select с помощью innerHTML.

Другой подход заключается в том, чтобы различные элементы select были записаны статически, но скрыты по умолчанию. Затем вы можете скрыть нужный вам элемент select на основе опции, выбранной в первом select.

Надеюсь, это поможет.

Вернуться на верх