Preencha o menu suspenso HTML onclick
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).
Demo usasetTimeout()
de 50 milissegundos para emular um tempo de resposta do AJAX.
Como posso conseguir isso para preencheronclick
e 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 eselect
Isso 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.