Создаем мультивыбор в HTML без Ctrl: JavaScript-решение

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

Вы можете обойти необходимость зажатия клавиши Ctrl при выборе нескольких элементов в мультиселекте, перехватывая событие mousedown на элементах списка. Ниже приведён пример кода на JavaScript, который модифицирует стандартное поведение:

document.querySelector('select[multiple]').addEventListener('mousedown', (e) => {
  if (e.target.tagName === 'OPTION') {
    e.preventDefault(); // Отменяем действие по умолчанию
    const option = e.target;
    option.selected = !option.selected; // Инвертируем выбранный элемент
    e.target.parentNode.dispatchEvent(new Event('change')); // Генерируем событие изменения
  }
});

Такой подход позволит пользователям выбирать или снимать выбор пунктов одним кликом мыши без использования дополнительных клавиш.

Удобство использования

Кроссплатформенная совместимость и эмуляция стандартных действий пользователя — ключ к удобному и понятному интерфейсу. В разных браузерах, включая Safari, Chrome и Opera, может потребоваться использование методов setAttribute и removeAttribute для обеспечения совместимости:

const selectBox = document.querySelector('select[multiple]');
selectBox.addEventListener('mousedown', (e) => {
  if (e.target.tagName === 'OPTION') {
    e.preventDefault(); // Предотвращаем стандартное поведение
    let selected = e.target.hasAttribute('selected');
    selected ? e.target.removeAttribute('selected') : e.target.setAttribute('selected', 'selected'); // Меняем атрибут selected
    selectBox.dispatchEvent(new Event('change')); // Производим событие изменения
  }
});

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

Продвинутый UX-дизайн

Чтобы имитировать поведение чекбоксов внутри мультиселекта, можно скрыть чекбоксы и стилизовать их с помощью CSS:

<!-- Каждый пункт <option> связан с соответствующим скрытым чекбоксом -->
<select multiple id="multiSelect">
  <option data-linked-checkbox="cb1">Опция 1</option>
  <option data-linked-checkbox="cb2">Опция 2</option>
</select>
<input type="checkbox" id="cb1" hidden>
<input type="checkbox" id="cb2" hidden>

Синхронизация состояний чекбоксов и опций осуществляется через JavaScript:

document.querySelectorAll('select[multiple] option').forEach(option => {
  const linkedCheckboxId = option.dataset.linkedCheckbox;
  const linkedCheckbox = document.getElementById(linkedCheckboxId);

  option.addEventListener('mousedown', (e) => {
    e.preventDefault();
    linkedCheckbox.checked = !linkedCheckbox.checked;
    option.selected = linkedCheckbox.checked;
    option.parentNode.dispatchEvent(new Event('change'));
  });
});

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

Изощрённое управление состояниями

В приложениях, где требуется трекать состояния элементов при различных видами взаимодействия, можно воспользоваться методом data() из jQuery для хранения информации о выборе:

$('select[multiple] option').on('mousedown', function (e) {
  e.preventDefault();
  const isSelected = $(this).data('selected');
  $(this).data('selected', !isSelected).prop('selected', !isSelected);
  $(this).parent().trigger('change');
});

Такой подход упрощает управление состояниями.

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

До появления JavaScript для выбора нескольких пунктов списка требовалось удерживать клавишу Ctrl. Со скриптами достаточно лишь одного клика:

elevator.onselect = function() {
  this.selected = !this.selected;  // Без использования Ctrl
};

Пример делает всё наглядным:

До: [🔒📶, 📶, 🔒📶, 📶]
После: [🔓📶, 📶, 🔓📶, 📶]

Теперь клики по списку стали точно такими же простыми, как выбор этажа в лифте.

Скрытые проблемы выбора

Чтобы не столкнуться с проблемой отмены выбора всех пунктов списка при его перетаскивании, в предложенных выше скриптах не предусмотрена функция selectAll. Использование cloneNode() для клонирования элементов позволяет сохранить обработчики событий без возникновения конфликтов.

Поддержка – ключевой аспект

Чтобы облегчить чтение кода и упростить последующие обновления, рекомендуется оставлять в коде комментарии.

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

1. <select>: Элемент управления HTML Select – HTML: Язык гипертекстовой разметки | MDN — подробное руководство по <select> от MDN.
2. HTML Standard — официальная спецификация элемента <select>.
3. События – изменение — подробнее о событии change, применяемом в формах.
4. Руководство по использованию Ajax без jQuery — SitePoint — как обращаться к Ajax без использования jQuery.
5. Свойство MouseEvent: ctrlKey – Веб API | MDN — об обнаружении нажатия Ctrl во время событий мыши.