Создание зависимых выпадающих списков является распространенной задачей при разработке веб-приложений. Зависимые выпадающие списки позволяют пользователю выбирать опции в одном списке, что влияет на доступные опции в другом списке. В этом ответе мы рассмотрим, как это можно реализовать с использованием HTML, CSS и JavaScript.
Для начала, давайте создадим два выпадающих списка: один для выбора категории и другой для выбора подкатегории.
Шаг 1: Создание HTML-разметки
В этом шаге мы создадим базовую HTML структуру для наших списков:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Зависимые выпадающие списки</title>
</head>
<body>
<h1>Создание зависимых выпадающих списков</h1>
<label for="category">Категория:</label>
<select id="category">
<option value="">Выберите категорию</option>
<option value="fruit">Фрукты</option>
<option value="vegetables">Овощи</option>
</select>
<label for="subcategory">Подкатегория:</label>
<select id="subcategory" disabled>
<option value="">Сначала выберите категорию</option>
</select>
<script src="script.js"></script>
</body>
</html>
В этом коде у нас есть два выпадающих списка: один с идентификатором category и другой с идентификатором subcategory. Второй список изначально отключен, так как он зависит от выбора в первом списке.
Шаг 2: Добавление JavaScript для зависимостей
Теперь нам нужно написать JavaScript, который будет управлять взаимодействием между этими списками. Создадим файл script.js и добавим следующий код:
const categorySelect = document.getElementById('category');
const subcategorySelect = document.getElementById('subcategory');
const subcategories = {
fruit: ['Яблоки', 'Бананы', 'Апельсины'],
vegetables: ['Морковь', 'Картошка', 'Помидоры']
};
categorySelect.addEventListener('change', function() {
const selectedCategory = this.value;
subcategorySelect.innerHTML = '';
if (selectedCategory) {
subcategorySelect.disabled = false;
subcategories[selectedCategory].forEach(function(subcategory) {
const option = document.createElement('option');
option.value = subcategory;
option.textContent = subcategory;
subcategorySelect.appendChild(option);
});
} else {
subcategorySelect.disabled = true;
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'Сначала выберите категорию';
subcategorySelect.appendChild(defaultOption);
}
});
В этом коде мы добавляем обработчик события на изменение выбора в первом выпадающем списке. Если выбрана категория, мы заполняем второй список соответствующими подкатегориями. Если категория не выбрана, второй список снова отключается.
Шаг 3: Стилизация с помощью CSS
Теперь добавим немного стилей, чтобы сделать наши списки более привлекательными. Вставьте следующий CSS в секцию <head> вашего HTML-файла:
<style>
body { font-family: Arial, sans-serif; }
label { display: block; margin-top: 20px; }
select { margin-top: 5px; width: 200px; }
</style>
Эти стили сделают текст более читаемым и добавят отступы между элементами.
Заключение
Теперь у вас есть рабочий пример зависимых выпадающих списков, созданный с использованием HTML, CSS и JavaScript. Вы можете расширить его, добавляя больше категорий и подкатегорий, а также улучшая пользовательский интерфейс. Это прекрасный способ сделать вашу форму более динамичной и удобной для пользователя.
Надеюсь, это руководство было полезным для вас. Удачи в ваших проектах!