Ограничение выбора в <SELECT multiple>: один или несколько

Быстрый ответ

Чтобы в элементе <select multiple> можно было выбрать единственный пункт, примените небольшой скрипт JavaScript для обработки события change:

// Не давайте выбирать несколько пунктов!
document.querySelector('#noDoubleDipping').addEventListener('change', (e) => {
  e.target.querySelectorAll('option').forEach(opt => opt.selected = false); // Прошу прощения, но это вам не разрешено, Дэйв.
  e.target.selectedOptions[0].selected = true; // Может выжить только один!
});

Вставьте этот код в HTML и увидите результат:

<select id="noDoubleDipping" multiple>
  <option value="1">Один</option>
  <option value="2">Два</option>
  <!-- Добавьте еще вариантов выбора -->
</select>

Этот скрипт предоставляет вам полный контроль над выбором и гарантирует, что будет выбран тольк ко последний пункт, по которому был произведён клик.

Исследуем тег select

Элемент <select> с атрибутом multiple даёт возможность пользователю выбирать сразу несколько значений. Это крайне удобно для форм, где не требуется немедленно отправлять каждый выбранный вариант.

Добавляя атрибут size, можно задать количество одновременно отображаемых пунктов. Без size выпадающий список отобразит только один пункт, заставляя пользователя предпринимать дополнительные действия для просмотра остальных.

Упрощаем визуальное отображение multi-select: Ограничиваемся одним выбором

Если вы хотите видеть сразу несколько доступных пунктов, но при этом допускать выбор только одного, опустите multiple и используйте size. Это превратит элемент в аккуратный список с одиночным выбором:

<select id="cleanAndClear" size="3">
  <option value="1">Вариант A</option>
  <option value="2">Вариант B</option>
  <!-- Добавьте больше вариантов, чтобы удивить пользователей -->
</select>

Такой список одновременно покажет три предлагаемых варианта, но разрешит пользователю выбрать только один из них, предлагая вам чёткий и понятный пользовательский интерфейс для сценариев одиночного выбора.

Комфорт для пользователя: Дизайн и функциональность

При проектировании элемента формы крайне важно учесть удобство и интуитивность для конечного пользователя. Списки, которые выглядят как multi-select, но функционируют как single-select, могут сбить с толку. Элементы управления должны вести себя предсказуемо, чтобы избежать неприятных сюрпризов для пользователей.

Визуализация

Рассмотрим принцип работы на примере:

До клика       :   После клика
[🟢🍏] [🔵🍇]    →  [🔴🍎]
[🔵🍇] [🔵🍋]        [🔵🍇] [🔵🍋]
[🔵🍋] [🔵🍓]        [🔵🍋] [🔵🍓]
[🔵🍓]               [🔵🍓]

Одиночный выбор в интерфейсе multi-select.

🟢🍏 → Ваш выбор
🔵🍇 → Другие варианты

CSS и JavaScript совместно работают для обеспечения одиночного выбора в условиях multi-select.

Дополняем и улучшаем

Гладкий учет крайних случаев

• Важен именно последний выбор: change контролирует динамику выбора.
• Без неожиданных горячих клавиш: Браузерские сокращения не позволят выбрать несколько пунктов с помощью CTRL.

Подробнее об этом расскажет наш спикер на видео

Улучшаем пользовательский опыт

• Сделайте выбранный вариант заметным: Стилизуйте активный пункт, подчеркнув выбор пользователя.
• Чёткие указания: Дайте пользователям чёткие инструкции, если ваш компонент отличается от стандартного поведения.

Дополнительная доступность

• Учет любителей клавиатуры: Обеспечьте доступ к вашему элементу через атрибут tabIndex.
• Голосовое сопровождение: Разъясняйте функцию элемента с помощью ARIA-атрибутов, например, aria-label или aria-labelledby.

Углубляемся с продвинутыми техниками

Интеграция с внешними библиотеками

Воспользуйтесь внешними библиотеками, например, Selectmenu от jQuery UI, для создания более гибко конфигурируемого элемента <select> без необходимости писать дополнительный код на JavaScript.

Сначала базовые возможности, затем расширенные

Начните с обычного <select> без multiple, затем допустите расширение возможностей с помощью JavaScript в соответствии с потребностями пользователей и возможностями браузера.

Полезные материалы

1. Тег select в HTML — Объяснение базового применения элемента <select>.
2. <select>: Элемент HTML Select — Полная документация и примеры применения <select> от MDN.
3. JSFiddle – Песочница кода — Проверьте и поделитесь HTML-кодом в интернете, это удобно для демонстрации поведения элемента select.
4. Selectmenu | jQuery UI — Используйте для создания настраиваемых меню <select> с помощью jQuery UI.
5. Атрибут multiple тега select в HTML — Подробное описание атрибута, позволяющего выбирать несколько пунктов в <select>.