Как сделать 2 выпадающих списка, взаимодействующих друг с другом

Выпадающие списки (dropdown lists) являются полезным инструментом для создания интерактивных форм или меню на веб-страницах. Иногда возникает необходимость создать два или более выпадающих списка, которые могут взаимодействовать друг с другом - то есть значения второго списка зависят от выбранного значения в первом списке. В этой статье мы рассмотрим, как легко реализовать такое взаимодействие с использованием HTML, CSS и JavaScript.

Шаг 1: Создание HTML-разметки

Сначала создадим базовую структуру HTML-документа. Нам понадобятся два выпадающих списка и элемент, который будет показывать выбранные значения из списков. Вот пример разметки:

<select id="first-list">
  <option value="1">Вариант 1</option>
  <option value="2">Вариант 2</option>
  <option value="3">Вариант 3</option>
</select>

<select id="second-list">
  <option value="a">Опция A</option>
  <option value="b">Опция B</option>
  <option value="c">Опция C</option>
</select>

<div id="selected-values"></div>

Каждый списк имеет уникальный идентификатор (id), который будет использоваться для обращения к элементам через JavaScript. Также нужен контейнер (div) для отображения выбранных значений из списков.

Шаг 2: Применение стилей с помощью CSS

Стилизуйте списки и контейнер согласно вашему дизайну. Например, вы можете использовать следующие CSS-стили:

#first-list, #second-list {
  width: 200px;
  height: 30px;
  margin-bottom: 10px;
}

#selected-values {
  margin-top: 10px;
  font-weight: bold;
}

Шаг 3: Написание JavaScript-кода

JavaScript позволяет нам добавить взаимодействие между выпадающими списками. Мы можем использовать событие "change" для отслеживания изменений значения первого списка, а затем обновлять значения второго списка в зависимости от выбранного значения первого.

// Получаем ссылки на списки и контейнер
const firstList = document.getElementById("first-list");
const secondList = document.getElementById("second-list");
const selectedValues = document.getElementById("selected-values");

// Обрабатываем событие изменения значения первого списка
firstList.addEventListener("change", function() {
  // Очищаем список
  secondList.innerHTML = "";

  // Получаем выбранное значение из первого списка
  const selectedOption = firstList.value;

  // Генерируем новые значения для второго списка на основе выбранного значения первого
  if (selectedOption === "1") {
    secondList.innerHTML = `
      <option value="a">Опция A</option>
      <option value="b">Опция B</option>
      <option value="c">Опция C</option>
    `;
  } else if (selectedOption === "2") {
    secondList.innerHTML = `
      <option value="x">Option X</option>
      <option value="y">Option Y</option>
      <option value="z">Option Z</option>
    `;
  } else if (selectedOption === "3") {
    secondList.innerHTML = `
      <option value="alpha">Option Alpha</option>
      <option value="beta">Option Beta</option>
      <option value="gamma">Option Gamma</option>
    `;
  }

  // Обновляем отображение выбранных значений
  updateSelectedValues();
});

// Обрабатываем событие изменения значения второго списка
secondList.addEventListener("change", function() {
  // Обновляем отображение выбранных значений
  updateSelectedValues();
});

// Функция для обновления отображения выбранных значений
function updateSelectedValues() {
  const firstSelectedValue = firstList.options[firstList.selectedIndex].text;
  const secondSelectedValue = secondList.options[secondList.selectedIndex].text;

  selectedValues.textContent = `Выбрано: ${firstSelectedValue}, ${secondSelectedValue}`;
}

Вывод

Создание двух выпадающих списков, взаимодействующих друг с другом, может быть достаточно простой задачей с использованием HTML, CSS и JavaScript. Следуя этим шагам, вы сможете легко реализовать подобное взаимодействие на своей веб-странице. Не забывайте также настроить внешний вид списков и решить множество других деталей, чтобы создать полностью функциональный и привлекательный интерфейс для пользователей.