Выпадающий список в HTML и JavaScript¶

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

¶Основные способы реализации

¶HTML-элемент select

Простейший способ — встроенный тег <select> с вложенными <option>:

``html <select name="city" id="city"> <option value="msk">Москва</option> <option value="spb">Санкт-Петербург</option> <option value="kzn">Казань</option> </select> ``

Атрибут value передаётся при отправке формы, текст между тегами отображается пользователю. Атрибут selected задаёт начальный выбор, disabled — недоступный вариант, multiple — множественный выбор.

Достоинства: нативная доступность (screen readers), работа без JavaScript, корректная отправка данных формой. Недостатки: ограниченное оформление, сложность кастомизации внешнего вида в разных браузерах.

¶Кастомный выпадающий список на CSS

Распространённый приём — комбинация чекбокса или чекбокса-триггера с псевдоклассом :checked и соседнего селектора:

``css .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,.2); min-width: 160px; } .dropdown:hover .dropdown-content { display: block; } ``

Вариант с чекбоксом позволяет управлять видимостью кликом, а не наведением:

``html <input type="checkbox" id="toggle" class="dropdown-toggle"> <label for="toggle" class="dropdown-btn">Выбрать</label> <div class="dropdown-content">…</div> ``

``css .dropdown-toggle { display: none; } .dropdown-toggle:checked ~ .dropdown-content { display: block; } ``

¶Выпадающее меню на JavaScript

Для сложных сценариев (анимация, закрытие по клику вне, динамическая подгрузка) используется JavaScript:

``html <div class="dropdown"> <button class="dropdown-btn" aria-expanded="false">Меню</button> <ul class="dropdown-content" hidden> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> </ul> </div> ``

```js const btn = document.querySelector('.dropdown-btn'); const menu = document.querySelector('.dropdown-content');

btn.addEventListener('click', () => { const open = menu.hasAttribute('hidden'); menu.toggleAttribute('hidden'); btn.setAttribute('aria-expanded', String(open)); });

document.addEventListener('click', (e) => { if (!e.target.closest('.dropdown')) { menu.setAttribute('hidden', ''); btn.setAttribute('aria-expanded', 'false'); } }); ```

¶Стилизация

Стандартный <select> оформляется через appearance: none и собственные фоновые изображения для стрелки:

``css select { appearance: none; background: #fff url('arrow.svg') no-repeat right 8px center; padding: 8px 32px 8px 12px; border: 1px solid #ccc; border-radius: 4px; } ``

Для кастомных списков применяются position: absolute, z-index и переходы opacity/transform для плавного появления.

¶Доступность

Кастомные реализации требуют ручной проработки доступности:

• триггеру присваивается aria-haspopup="listbox" и aria-expanded;
• списку — роль role="listbox", пунктам — role="option" и aria-selected;
• поддерживается управление с клавиатуры: Enter/Space — открытие, стрелки — навигация, Escape — закрытие, Tab — переход;
• фокус возвращается на триггер при закрытии.

Нативный <select> реализует эти требования автоматически.

¶Готовые библиотеки

Для сложных интерфейсов используются компоненты:

¶Типичные ошибки

• отсутствие обработчика закрытия при клике вне списка;
• игнорирование клавиатурной навигации;
• использование <div> вместо семантических тегов без ролей ARIA;
• отсутствие индекса z-index, из-за чего меню перекрывается соседними блоками;
• жёсткая фиксированная высота, ломающая масштабирование текста.

¶Применение

Выпадающие списки используются в формах регистрации, фильтрах каталогов, селекторах валют и языков, многоуровневых меню (каскадные списки с вложенными подменю) и в компонентах автодополнения, где варианты фильтруются по вводимому тексту.

Источники:

• MDN Web Docs — HTML <select>
• MDN Web Docs — ARIA: listbox role
• W3C Web Accessibility Initiative — APG Menu Button
• Спецификация HTML Living Standard, WHATWG