Estoy tratando de obtener un cuadro de select de selección múltiple HTML para desplazarme a la primera opción seleccionada, pero no puedo encontrar ninguna forma de hacerlo. ¿Hay alguna manera?
<select id=s multiple> <option value=0>One</option> ... <option value=99 selected>Many</option> </select>Puede usar la siguiente función que buscará el primer elemento seleccionado en su lista y desplazará el cuadro de selección hasta él.
Asegúrese de llamar a la función cuando ya tenga las selecciones cargadas, generalmente en el evento window.onload , pero si está completando las selecciones con una llamada ajax, la función debe llamarse respectivamente (una vez que las selecciones ya están en su lugar)
// this is how you call the function, using the ID ("s") in your example: window.onload = function(){ scrollToSelected( "s" ) } function scrollToSelected( select_id ) { var select = document.getElementById( select_id ); var opts = select.getElementsByTagName('option'); for ( var j = opts.length -1; j > 0; --j ) { if ( opts.item(j).selected == true ) { select.scrollTop = j * opts.item(j).offsetHeight; return; } } }Con la siguiente línea puede establecer la posición de desplazamiento exacta:
select.scrollTop = j * opts.item(j).offsetHeight;... lo anterior intentará desplazarse hasta que el seleccionado esté en la parte superior de la lista.
Gracias por su consejo.
Parece que no puedo publicar el código en un comentario, así que tendré que ponerlo aquí. Lo que parece funcionar es la height: 20px; en el CSS para la etiqueta de option y el siguiente Javascript:
var select = document.getElementById(select_id); if (!select) console.error("no " + select_id); var opts = select.getElementsByTagName('option'); var j = select.selectedIndex; if (j == -1) return; select.scrollTop = j * 20; Obtengo 0 para la altura de offsetHeight de la opción, pero la codificación de un valor como el anterior parece funcionar.