Tengo una lista establecida como multiple, quiero que al seleccionar una o mas opciones poder establecer el atributo 'seleccionado' a cada una de las opciones seleccionadas, si alguna de ellas esta deseleccionada elimine el atributo 'seleccionado' de esa opcion, esto se puede hacer solo con javascript puro?
var selects = document.querySelectorAll('select'); for (const select of selects) { const options = select.options, selected_options = select.selectedOptions, multiple = select.hasAttribute('multiple'); select.addEventListener('change', function(ele) { if (multiple) { // Here should be the event for the multiple list, I can't do it. } else { for (i = 0; i < options.length; i++) { const option = options[i]; Array.prototype.filter.call(option.parentNode.children, function () { if(option.selected) { option.setAttribute('selected', 'selected') } else { option.removeAttribute('selected') } }) } } }) } <select name="second" class="form-select" aria-label="Second select example" id="selectSecond"> <option selected>Open this select menu</option> <option value="a">One A</option> <option value="b">Two B</option> <option value="c">Three C</option> </select> <select name="third[]" class="form-select" aria-label="Third select example" id="selectThird" multiple> <option selected>Open this select menu</option> <option value="a1">A One</option> <option value="a2">A Two</option> <option value="a3">A Three</option> <option value="a4">A Four</option> <option value="a5">A Five</option> <option value="a6">A Six</option> </select>Espero haberme explicado bien y me podáis ayudar. Gracias por adelantado. Atentamente.
Pruebo que funciona bien, ¿puede responder a cualquier problema encontrado?
var selects = document.querySelectorAll('select'); for (const select of selects) { const options = select.options, selected_options = select.selectedOptions, multiple = select.hasAttribute('multiple'); select.addEventListener('change', function(ele) { if (multiple) { for (var i = 0; i < options.length; i++) { const option = options[i]; if(option.selected) { option.setAttribute('selected', 'selected') } else { option.removeAttribute('selected') } console.log(option.text,option.getAttribute('selected')); } } else { for (i = 0; i < options.length; i++) { const option = options[i]; Array.prototype.filter.call(option.parentNode.children, function () { if(option.selected) { option.setAttribute('selected', 'selected') } else { option.removeAttribute('selected') } }) } } }) } <select name="second" class="form-select" aria-label="Second select example" id="selectSecond"> <option selected>Open this select menu</option> <option value="a">One A</option> <option value="b">Two B</option> <option value="c">Three C</option> </select> <select name="third[]" class="form-select" aria-label="Third select example" id="selectThird" multiple> <option selected>Open this select menu</option> <option value="a1">A One</option> <option value="a2">A Two</option> <option value="a3">A Three</option> <option value="a4">A Four</option> <option value="a5">A Five</option> <option value="a6">A Six</option> </select>