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).
Demo używasetTimeout()
50 milisekund na emulację czasu odpowiedzi AJAX.
Jak mogę to wypełnić?onclick
i 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żdymselect
spowoduje 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.