¿Puedo abrir una lista desplegable usando jQuery?
Para esta lista desplegable en HTML:
<select id="countries">
<option value="1">Country</option>
</select>
Me gustaría abrir la lista (lo mismo que hacer clic izquierdo en ella). ¿Es esto posible usando JavaScript (o más específicamente jQuery)?
Estaba tratando de encontrar lo mismo y me decepcioné. Terminé cambiando el tamaño del atributo para el cuadro de selección para que parezca abrirse
$('#countries').attr('size',6);
y luego cuando hayas terminado
$('#countries').attr('size',1);
Puede simular fácilmente un clic en un elemento , pero un clic en <select>no abrirá el menú desplegable.
Usar múltiples selecciones puede ser problemático. Quizás debería considerar botones de opción dentro de un elemento contenedor que pueda expandir y contraer según sea necesario.
Me he encontrado con el mismo problema y tengo una solución. Una función llamada ExpandSelect() que emula el clic del mouse en el elemento "seleccionar", lo hace creando otro <select>elemento que está absolutamente posicionado y tiene múltiples opciones visibles a la vez configurando el sizeatributo. Probado en los principales navegadores: Chrome, Opera, Firefox, Internet Explorer. Explicación de cómo funciona, junto con el código aquí:
Editar (el enlace estaba roto) .
Creé un proyecto en Google Code, busque el código allí:
http://code.google.com/p/expandselect/
Capturas de pantalla
Hay una pequeña diferencia en la GUI al emular el clic, pero en realidad no importa, compruébalo tú mismo:
Al hacer clic con el mouse:
(fuente: googlecode.com )
Al emular haga clic en:
(fuente: googlecode.com )
Más capturas de pantalla en el sitio web del proyecto, enlace arriba.
Esto debería cubrirlo:
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
countries.dispatchEvent(event); //we use countries as it's referred to by ID - but this could be any JS element var
Esto podría estar vinculado, por ejemplo, a un evento de pulsación de tecla, de modo que cuando el elemento tenga el foco, el usuario pueda escribir y se expandirá automáticamente...
--Contexto--
modal.find("select").not("[readonly]").on("keypress", function(e) {
if (e.keyCode == 13) {
e.preventDefault();
return false;
}
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
this.dispatchEvent(event);
});
