Заполнить раскрывающийся список HTML onclick

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

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

кроме того, конструкция должны используйте родной HTML select элемент.

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

enter image description here

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

------ Просмотр Демо ------

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

как я могу заставить это заполнить onclick и правильно отобразить?

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

EDIT: кроме того, есть ли раскрывающийся список плагинов jQuery, который использует родную тему браузера для стиля?

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

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

обновление: это не проблема в FireFox. select открывается, затем загружает новые элементы и отображает их, все в открытом состоянии.

7
ajax html javascript jquery select

4 ответов

лично я бы выбрал другой подход полностью, но это зависит от ваших потребностей. Здесь я предполагаю, что выпадающий список "почти определенно" будет нажат (и, следовательно, загружен) в какой-то момент пользователем.

имея это в виду, я бы соблазнился заполнить select списки с использованием ajax, как только страница загружена. Это имеет преимущество в том, что вы можете быстро загрузить страницу (так как по-прежнему нет сбора списка "загрузка страницы"), но это также означает, что ajax, скорее всего завершите, прежде чем пользователь поймет, что им нужно использовать список выбора. Я бы даже пошел на дополнительный шаг и имел временные значки загрузки вместо выбранных, пока ajax работает, это магия (или отключить их!) в случае, если ajax имеет медленный день, и пользователь быстро, как Супермен.

конечно, все это зависит от того, как "установить в камень" ваше требование-сделать загрузку ajax при взаимодействии пользователя с раскрывающимся элементом

или, может быть,этот может оказаться полезным?

2

изменить событие от click до focus

2

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

Это может быть компромиссом для вас, но попробуйте AJAX-заполнить перед событием click. Это может быть: - при наведении, как вы уже сделали (пользователь должен прокручивать для щелчка в любом случае) - дополнительный щелчок для ваших пользователей на элементе, соседствующем с select

1

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

0