Как заставить менять состояние option по клику?
Стандартное поведение такое:
При клике сбрасываются все option и выбирается кликнутый (там еще есть действия с Shift и Control).
Я хочу, чтобы менялось состояние кликнутого option и не менялось состояние остальных.
select.addEventListener("click", function(event) {
event.preventDefault();
let option = event.target;
option.selected = !option.selected});
Вот, что я сделал, но оно вообще все ломает:
event.preventDefault() похоже не работает и при клике все работает как будто это обычный
<select multiple>. А после этого срабатывает
option.selected = !option.selected и снимает свойство selected.
---------------------------
Чуть больше кода:
spoiler// Я создаю select
let select = document.createElement('select');
select.setAttribute('multiple', 'multiple');
select.addEventListener("change", function(event) {
event.preventDefault();
event.stopPropagation();
// // let option = event.target;
// // option.selected = !option.selected;
});
// Я наполняю select данными
if (data) {
for (let i = 0; i < data.length; i++) {
let o = document.createElement('option');
o.value = data[i];
o.innerText = (data[i] !== null) ? data[i] : "Пусто" ;
o.selected = true;
o.addEventListener('click', function(event){
event.preventDefault();
event.stopPropagation();
this.selected = !this.selected})
select.appendChild(o);}
// И выбираю все option
for (let i = 0; i > select.length; i++) {select.options[i].selected = true;}
}
