Как заставить менять состояние option по клику?
Как заставить менять состояние option по клику?
Стандартное поведение такое:
При клике сбрасываются все option и выбирается кликнутый (там еще есть действия с Shift и Control).
Я хочу, чтобы менялось состояние кликнутого option и не менялось состояние остальных.
select.addEventListener("click", function(event) { event.preventDefault(); let option = event.target; option.selected = !option.selected}); |
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;} } |
// Я создаю 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;} }
spoilersnippet
Дополнительно:
https://stackoverflow.com/questions/8641729/how-to...
snippet
- нишоси, у нас jsfiddle заработал, давно? почему?
- Владислав Лысков, местами барахлил, но работал)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы изменить состояние элемента при клике на него, вам нужно использовать JavaScript. Вот пример кода, который поможет вам решить эту задачу:
document.addEventListener('DOMContentLoaded', function() { var options = document.querySelectorAll('select option'); options.forEach(function(option) { option.addEventListener('click', function() { this.selected = !this.selected; }); }); });
В этом коде мы добавляем слушатель события 'click' к каждому элементу внутри элемента . При клике на устанавливается или снимается атрибут 'selected', что позволяет изменить его состояние.
Обратите внимание, что это простой пример и может потребоваться дополнительная логика в зависимости от ваших конкретных требований. Например, если вы хотите позволить выбирать только один вариант в списке, вам нужно будет сначала снять атрибут 'selected' у всех других перед установкой его на текущий выбранный элемент.
Надеюсь, это поможет вам решить вашу проблему! Если у вас есть дополнительные вопросы, не стесняйтесь задавать.