Wypełnij menu rozwijane HTML na kliknięciu

Mam stronę zawierającą wiele HTMLselect listy rozwijane i wymaga populacjionclick elementu. Ta populacja jest wykonywana przy użyciu wywołania AJAX w detektorze zdarzenia kliknięciaselect elementy.

Powodem tego jest to, że wydajność i obciążenie są bardzo ważne, a zatem nie mogą być wypełniane podczas ładowania strony.

Również projektmusi użyj natywnego HTMLselect element.

Stworzyłem wersję demonstracyjną jsFiddle, aby pokazać ten problem. Po kliknięciuselect elementy są wypełnione, a szerokośćselect w rezultacie wzrasta.

Jednakżeselect wyświetla tylko opcję początkową (przed populacją AJAX).

------ Zobacz demo ------

Demo używasetTimeout() 50 milisekund na emulację czasu odpowiedzi AJAX.

Jak mogę to wypełnić?onclicki wyświetlać poprawnie?

Czy istnieje sposób na otwarcieselect na wywołanie zwrotne odpowiedzi popualation?

EDYCJA: Alternatywnie, czy istnieje lista rozwijana wtyczek jQuery, która wykorzystuje rodzimy motyw przeglądarki do stylizacji?

Co próbowałem do tej pory

Wypełnianieselect na zawisie, jednak szybki użytkownik może otworzyćselect przed załadowaniem opcji. Ponadto, jeśli użytkownik miał przewijać całą stronę i nad każdymselectspowoduje to wiele niepotrzebnych wywołań AJAX.Zmiana słuchacza zdarzeń nafocus zamiastclick (tak jak@ AndyPerlitch zasugerował). Nie zadziałałoby to jednak, gdyby odpowiedź AJAX zajęła tylko 50 milisekund. (Zobacz Demo)Zmiana słuchacza zdarzeń namousedown ma taki sam efekt jakfocus

AKTUALIZACJA: To nie jest problem w FireFox.select otwiera, a następnie ładuje nowe elementy i wyświetla je, wszystkie w stanie otwartym.

questionAnswers(4)

yourAnswerToTheQuestion