Eu tenho uma página que contém vários HTMLselect dropdowns e requer populaçãoonclick do elemento. Essa população é feita usando uma chamada AJAX no ouvinte de evento de clique doselect elementos.

A razão para isso é que o desempenho e a carga são muito cruciais e, portanto, não podem ser preenchidos no carregamento da página.

Além disso, o designdevo use o HTML nativoselect elemento.

Eu criei uma demonstração jsFiddle para mostrar o problema. Quando você clica noselect os itens são preenchidos e a largura doselect aumenta como resultado.

No entanto, oselect exibe apenas a opção inicial (antes da população AJAX).

------ Ver demonstração ------

Demo usasetTimeout() de 50 milissegundos para emular um tempo de resposta do AJAX.

Como posso conseguir isso para preencheronclicke exibir corretamente?

Existe uma maneira de abrir oselect no retorno de chamada da resposta da população?

EDIT: Como alternativa, existe uma lista suspensa do plugin jQuery, que usa o tema nativo do navegador para o estilo?

O que eu tentei até agora

Povoando oselect no foco, no entanto, um usuário rápido pode abrir oselect antes das opções serem carregadas. Além disso, se um usuário tiver que percorrer todo o caminho até a página eselectIsso causaria muitas chamadas desnecessárias do AJAX.Alterando o Ouvinte de Eventos parafocus ao invés declick (Como@AndyPerlitch sugerido). No entanto, isso não funcionaria se a solicitação do AJAX levasse apenas 50 milissegundos para responder. (Ver demonstração)Alterando o Ouvinte de Eventos paramousedown tem o mesmo efeito quefocus

ATUALIZAR: Isso não é um problema no FireFox.select abre, carrega novos itens e os exibe, todos em estado aberto.