HTML-элемент `option` обычно используется в составе элемента `select`, который позволяет пользователю выбирать один или несколько вариантов из выпадающего списка. Для множественного выбора необходимо установить атрибут `multiple` элемента `select`.
В браузерах уже реализованно стандартное поведение для множественного выбора с помощью клавиш Shift и Control (Cmd на Mac), поэтому вам не нужно реализовывать это поведение самостоятельно.
Если вы все же хотите изменить поведение `option`, можно использовать JavaScript. Вот пример кода с использованием `addEventListener` для назначения обработчика событий для элемента `select`:
```html
<select multiple id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<!-- ... другие опции ... -->
</select>
<script>
// Получаем элемент select
var selectElement = document.getElementById('mySelect');
// Функция для обработки клика по опции
function handleOptionClick(event) {
// Проверяем, нажата ли клавиша Ctrl (или Cmd на Mac)
if (event.ctrlKey || event.metaKey) {
// Переключаем состояние выбранного элемента option
var option = event.target;
option.selected = !option.selected;
}
// Предотвращение стандартного поведения, если используется Ctrl или Shift
if (event.ctrlKey || event.shiftKey) {
event.preventDefault();
} else {
// Если не используются модифицирующие клавиши, сбрасываем все остальные опции
for (var i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i] !== event.target) {
selectElement.options[i].selected = false;
}
}
}
}
// Добавляем обработчик событий для клика
selectElement.addEventListener('click', handleOptionClick);
</script>
```
Этот скрипт реализует следующее поведение:
- Если пользователь кликает на опцию с зажатой клавишей Ctrl (или Cmd), выбор этой опции переключается, не снимая выбор с других опций.
- Если пользователь кликает на опцию без дополнительных клавиш, выбор этой опции происходит, а все остальные снимаются (стандартное поведение переключения опций для элемента select без атрибута multiple).
Учтите, что браузеры уже предоставляют встроенную поддержку для множественного выбора, включая использование клавиш Shift и Control, поэтому такой код обычно не нужен, если вам подходит стандартное поведение.