Заполните HTML-раскрывающийся список по клику

У меня есть страница, которая содержит несколько HTMLselect выпадающих и требует населенияonclick элемента. Это заполнение выполняется с помощью вызова AJAX в прослушивателе событий clickselect элементы.

Причина этого заключается в том, что производительность и загрузка очень важны, и поэтому они не могут быть заполнены при загрузке страницы.

Также дизайндолжен использовать нативный HTMLselect элемент.

Я создал демо jsFiddle, чтобы показать проблему. Когда вы нажимаете наselect элементы заполнены, а ширинаselect увеличивается в результате.

Однакоselect отображает только начальную опцию (до заполнения AJAX).

------ Посмотреть демо ------

Демо используетsetTimeout() 50 миллисекунд для эмуляции времени отклика AJAX.

Как я могу получить это, чтобы заполнитьonclickи правильно отображать?

Есть ли способ открытьselect на обратный вызов ответа населения?

РЕДАКТИРОВАТЬ: В качестве альтернативы, есть ли выпадающий плагин jQuery, который использует родную тему браузера для стилизации?

Что я пробовал до сих пор

Заселениеselect при наведении, однако быстрый пользователь может открытьselect до загрузки параметров. Кроме того, если пользователь должен был прокрутить всю страницу вниз, и по каждомуselect, это вызовет много ненужных вызовов AJAX.Изменение слушателя события наfocus вместоclick (как@AndyPerlitch предложил). Однако это не сработает, если на запрос AJAX потребуется всего 50 миллисекунд. (Посмотреть демо)Изменение слушателя события наmousedown имеет тот же эффект, что иfocus

ОБНОВИТЬ: Это не проблема в FireFox.select открывает, затем загружает новые элементы и отображает их, находясь в открытом состоянии.

Ответы на вопрос(4)

Ваш ответ на вопрос