Как реализовать изменение значений в полях в реальном времени (тег select)?

Question

Разрабатываю одно приложение на Django. БД имеется.

Есть форма, в которой 3 поля (каждое из них - это select).

Выглядит она вот так:

<form action="{% url 'main:index' %}" method="post">
  <div class="form-group">
    <select class="form-control" name="country">
      {% for country in countries %}
        <option>{{ country }}</option>
      {% endfor %}
    </select>
    <select class="form-control" name="league">
      {% for ountry in countries %}
        <option>{{ country }}</option>
      {% endfor %}
    </select>
    <select class="form-control" name="team">
      {% for country in countries %}
        <option>{{ country }}</option>
      {% endfor %}
    </select>
  </div>
  <button class="btn btn-primary" type="submit">Найти</button>
</form>

Сейчас там просто 3 поля с выбором страны.

Я хочу реализовать следующее:

При выборе страны в первом поле, во втором появляются только элементы принадлежащие к этой стране, а в третьем поле уже элементы принадлежащие только к элементу из второго поля. Таким образом выбирается один конкретный элемент.

Я примерно понимаю, что должно происходить в бэкенде. По значению из первого поля данные в базе фильтруются и передаются во второе поле, после - такая же процедура, только уже со вторым и третьим полями.

А вот как это реализовать так, чтобы значения в полях менялись, так сказать, в реальном времени - не понимаю.

Буду рад любым ответам и идеям.

Спасибо.

Answer 1

Нужно подписатся на событие onchange у первого и второго select. и вызывать вде функции. По смене первого (выборе страны), получать его значение и отправлять ajax запрос на сервер, сервер должен будет прислать нужные данные для второго select. Для их отображения можно сделать:

select2.innerHTML = "";
for (let i = 0; i < response; i++) {
    select2.innerHTML += <option>response[i]</option>;
}

*response - переменная с данными из ajax.

Таким образом, первым действием select2.innerHTML = ""; очищается все. А циклом добавляются новые значения.

БЛОГ НА HUSL

Как реализовать изменение значений в полях в реальном времени (тег select)?

Ответы (1 шт):