0
196
Views¿Cómo se "restablece" correctamente un elemento <select> que admite múltiples opciones en JS normal?
Quiero poder restablecer las etiquetas <select> por sí mismas en lugar de hacer que se restablezcan con todo el formulario. Esto es lo que tengo hasta ahora:
<form autocomplete="off"> <select id="s" name="select" multiple> <option disabled>Select a value!</option> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option> </select> <button onclick="resetS()" type="button">Reset</button> </form>Y el JS:
function resetS() { const selectedOptions = document.getElementById('s').selectedOptions; for (let i = 0; i < selectedOptions.length; i++) { selectedOptions[i].selected = false; } }Cuando probé esto por primera vez, parecía funcionar. Sin embargo , solo cuando se selecciona una opción. He notado que cuando hay más de una opción actualmente seleccionada, parece fallar.
Comenzar con tres opciones y hacer clic en el botón Reset da como resultado esto, por alguna razón:
Todas las opciones se deseleccionan excepto una . ¿Por qué pasó esto? Sin embargo, al hacer clic en el botón Reset nuevamente, se anula la selección de la opción aún seleccionada.
2 answers
Answer question0
Puede establecer el atributo selectedIndex en -1 para indicar que no se ha seleccionado ningún elemento.
function resetS() { const multipleSelect = document.getElementById('s'); multipleSelect.selectedIndex = -1; } <form autocomplete="off"> <select id="s" name="select" multiple> <option disabled>Select a value!</option> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option> </select> <button onclick="resetS()" type="button">Reset</button> </form>0
La lista de elementos <option> seleccionados es una lista "viva". Cuando cambia la bandera selected en uno de los elementos, la lista cambia; es decir, la <option> que cambió desaparece de la lista, por lo que la longitud se acorta en 1. Por lo tanto, un bucle for indexado omitirá elementos.
La forma de lidiar con eso (bueno, una forma) es usar un ciclo while de la siguiente manera:
function resetS() { const selectedOptions = document.getElementById('s').selectedOptions; while (selectedOptions.length) { selectedOptions[0].selected = false; } }editar , o puede usar el método sugerido en la respuesta de Tom, que es más simple.