Как создать выпадающий список?
Выпадающий список (или элемент select) является одним из часто используемых элементов в формах HTML. Он позволяет пользователям выбирать одно из нескольких значений. В этом ответе мы рассмотрим, как создать выпадающий список с помощью HTML и обработать его значение с помощью JavaScript.
Пример простого выпадающего списка
Вот простой пример, как создать выпадающий список:
<!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>
<form id="fruitForm">
<label for="fruits">Фрукты:</label>
<select id="fruits" name="fruits">
<option value="apple">Яблоко</option>
<option value="banana">Банан</option>
<option value="orange">Апельсин</option>
<option value="mango">Манго</option>
</select>
<button type="submit">Отправить</button>
</form>
<p id="result"></p>
<script>
// Получаем элементы формы
const form = document.getElementById('fruitForm');
const result = document.getElementById('result');
// Обработчик события submit
form.addEventListener('submit', function (event) {
event.preventDefault(); // Предотвращаем стандартное поведение формы
const selectedFruit = form.fruits.value; // Получаем выбранное значение
result.textContent = `Выбранный фрукт: ${selectedFruit}`; // Отображаем результат
});
</script>
</body>
</html>
Пояснение к коду
- Мы создаем форму с заголовком и меткой для выпадающего списка.
- Используем
<select>для создания выпадающего списка, в который мы добавляем несколько<option>элементов.
- Сначала мы получаем доступ к форме и элементу для отображения результата.
- Затем устанавливаем обработчик события
submitна форму. Когда форма отправляется, событиеsubmitсрабатывает. - Мы используем
event.preventDefault(), чтобы предотвратить стандартное поведение отправки формы, чтобы страница не перезагрузилась. - Получаем выбранное значение из списка и отображаем его в параграфе.
Заключение
Выпадающие списки удобны для выбора одного значения из множества опций. С помощью приведенного примера новички могут легко понять, как создать и использовать выпадающий список в своих проектах frontend. Не забывайте также исследовать стилизацию с помощью CSS и доступность для улучшения пользовательского опыта.