0
280
Vistas¿Cómo hacer que el movimiento de las opciones seleccionadas sea circular?
Considere el siguiente elemento de selección. Intente moverse para navegar a través de las opciones usando las teclas de flecha. Verá que cuando llega al fondo no puede moverse hacia arriba si presiona hacia abajo una vez más. Y lo mismo para la parte superior.
<select> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select>Quiero tener esta función con select. Pero el problema es que no puedo encontrar la opción que se selecciona temporalmente durante la navegación.
Una cosa que descubrí es cambiar el selectedIndex del elemento, pero esto tampoco funciona porque no cambia la opción activa/sobrevolada actual de selección, sino que cambia el valor real de selección.
Tengo una restricción de que tengo que usar solo un elemento de selección simple de html.
Estaré agradecido si usted es capaz de ayudarme.
1 Respuestas
Responde la pregunta0
let $1 = document.querySelector('#s1') let $2 = document.querySelector('#s2') console.log('S1 VALUE:', $1.value, '\nS2 VALUE:', $2.value) <!-- DEFAULT --> <select id="s1"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select><br> <!-- PRE-SELECTED --> <select id="s2"> <option value="A">A</option> <option value="B">B</option> <option selected value="C">C</option> <option value="D">D</option> </select>Hay una captura de pantalla de mi resultado:
Si esa solución no funciona, puedes probar esto:
console.log(document.querySelector('select').selectedOptions[0].value) <select> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> En ese fragmento usé: selectedOptions , en la matriz de opciones elijo el primer objeto porque en el elemento <select> podemos elegir solo una opción, entonces obtengo el valor.