Tengo una página que contiene múltiples HTMLselect desplegables, y requiere poblaciononclick del elemento. Esta población se realiza mediante una llamada AJAX en el detector de eventos de clic delselect elementos.

La razón de esto es que el rendimiento y la carga son muy importantes y, por lo tanto, no se pueden completar en la carga de la página.

Además, el diseño.debe usar el HTML nativoselect elemento.

He creado una demostración de jsFiddle para mostrar el problema. Cuando haces clic en elselect los elementos se rellenan, y el ancho de laselect aumenta como resultado.

Sin embargo, elselect solo muestra la opción inicial (antes de la población AJAX).

------ Ver demo ------

Usos demosetTimeout() de 50 milisegundos para emular un tiempo de respuesta AJAX.

¿Cómo puedo conseguir esto para poblaronclick, y mostrar correctamente?

¿Hay alguna forma de abrir elselect ¿En la devolución de llamada de la respuesta de la población?

EDITAR: De forma alternativa, ¿existe un menú desplegable de complementos de jQuery que utiliza el tema nativo del navegador para el estilo?

Lo que he probado hasta ahora

Poblando elselect sobre la marcha, sin embargo, un usuario rápido puede abrir elselect antes de que las opciones se hayan cargado. Además, si un usuario tuviera que desplazarse hasta el final de la página y sobre cadaselect, esto causaría muchas llamadas innecesarias de AJAX.Cambiando el detector de eventos afocus en lugar declick (como@AndyPerlitch sugirió). Sin embargo, esto no funcionaría si la solicitud de AJAX tomara solo 50 milisegundos para responder. (Ver demo)Cambiando el detector de eventos amousedown tiene el mismo efecto quefocus

ACTUALIZAR: Esto no es un problema en FireFox.select se abre, luego carga los nuevos elementos y los muestra, todo en un estado abierto.