Вот вам реально полезный материал по созданию выпадающих списков — такой, какой я сам искал, когда только начинал работать с формами.
Базовый вариант (минимум кода)
👉 `<select>
<option>Выберите город</option> <option>Москва</option> <option>Санкт-Петербург</option> <option>Новосибирск</option> </select>`
Работает сразу, ничего дополнительного не нужно.
Продвинутая версия (для реальных проектов)
👉 `<label for="city-select">Ваш город:</label>
<select id="city-select" name="city" required>
<option value="" disabled selected>— Выберите —</option> <option value="msk">Москва</option> <option value="spb">Санкт-Петербург</option> <option value="nsk">Новосибирск</option> </select>`
Что мы улучшили:
- Добавили label для доступности
- Указали name для обработки формы
- Сделали обязательный выбор (required)
- Использовали value для отправки на сервер
Группировка вариантов
Когда нужно сгруппировать пункты:
👉 `<select>
<optgroup label="Россия"> <option>Москва</option> <option>Санкт-Петербург</option> </optgroup> <optgroup label="Зарубежье"> <option>Берлин</option> <option>Париж</option> </optgroup> </select>`
Множественный выбор
Если нужно выбрать несколько вариантов:
👉 `<select multiple size="4">
<option>HTML</option> <option>CSS</option> <option>JavaScript</option> <option>PHP</option> </select>`
Удерживайте Ctrl (Cmd на Mac) для выбора нескольких пунктов.
Стилизация через CSS
Базовые стили для улучшения вида:
👉 <style> select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; width: 200px; } </style>
Частые проблемы и решения
- Не работает required
Проверьте, что у первого option есть disabled и selected - Плохо выглядит на мобильных
Добавьте в head:
👉 <meta name="viewport" content="width=device-width, initial-scale=1"> - Нужен поиск по вариантам
Используйте JavaScript-библиотеки типа Select2
Работа с данными
- Получение выбранного значения на JavaScript:
👉 document.querySelector('select').value - Установка выбранного значения:
👉 document.querySelector('select').value = 'msk'
Альтернативы
Для сложных случаев рассмотрите:
- Библиотеки (Select2, Choices.js)
- Кастомные решения на div'ах
- Компоненты UI-фреймворков (Bootstrap, Material UI)
Важные нюансы
- Всегда используйте label — это важно для доступности
- Для обязательного выбора — required
- Указывайте значения в value, а не только текст
- Тестируйте на мобильных устройствах
Попробуйте создать свой список прямо сейчас — это лучший способ запомнить синтаксис. Если возникнут вопросы — пишите в комментарии, разберём конкретные случаи.