Füllen Sie das HTML-Dropdown-Menü mit Daten aus
Ich habe eine Seite, die mehrere HTML enthältselect Dropdowns und erfordert Bevölkerungonclick des Elements. Diese Auffüllung erfolgt über einen AJAX-Aufruf im Click-Event-Listener desselect Elemente.
Der Grund dafür ist, dass Leistung und Auslastung sehr wichtig sind und daher beim Laden von Seiten nicht angegeben werden können.
Auch das DesignMuss Verwenden Sie das native HTMLselect Element.
Ich habe eine jsFiddle-Demo erstellt, um das Problem zu zeigen. Wenn Sie auf die Schaltfläche klickenselect Die Elemente werden ausgefüllt und die Breite derselect erhöht sich dadurch.
Dieselect Zeigt nur die anfängliche Option an (vor der AJAX-Population).
Demo verwendetsetTimeout() 50 Millisekunden, um eine AJAX-Antwortzeit zu emulieren.
Wie kann ich das bevölkernonclickund richtig anzeigen?
Gibt es eine Möglichkeit das zu öffnen?select auf Rückruf der Bevölkerungsantwort?
BEARBEITEN: Gibt es alternativ ein Dropdown-Menü für jQuery-Plugins, das das native Design des Browsers für das Styling verwendet?
Was ich bisher versucht habe
Besiedlung derselect bei schwebeflug kann jedoch ein schneller benutzer das öffnenselect bevor die Optionen geladen wurden. Außerdem, wenn ein Benutzer einen Bildlauf auf der gesamten Seite und über alle durchführen sollselectDies würde eine Menge unnötiger AJAX-Aufrufe verursachen.Ändern des Ereignis-Listeners infocus anstattclick (wie@ AndyPerlitch empfohlen). Dies würde jedoch nicht funktionieren, wenn die Antwort auf die AJAX-Anforderung nur 50 Millisekunden dauern würde. (Siehe Demo)Ändern des Ereignis-Listeners inmousedown hat den gleichen Effekt wiefocusAKTUALISIEREN: Dies ist in FireFox kein Problem.select wird geöffnet, lädt dann neue Elemente und zeigt sie in geöffnetem Zustand an.