Обновить select после добавления options через javascript

@Vitukr · Регистрация: 08.11.2012

Студворк — интернет-сервис помощи студентам

На странице есть элемент select с одним пустым option.
По событию onclick (при этом раскрывается список options, где один пустой option) добавляю options, например, через jquery .append, заодно убираю событие onclick.
После отработки события onclick, список опций остается раскрыт в том же состоянии - один пустой option, хотя реально есть все добавленные опции.
Но, чтобы увидеть новый список добавленных опций, необходимо дважды кликнуть на select, т.е. первый клик закрывает старый список и второй клик открывает новый, уже с добавленными опциями.

Это очень неудобно для пользователя, да и догадаться будет трудно так делать.
Как сделать так, чтобы после добавления новых опций к селекту, раскрытый список селекта обновлялся без лишних кликов.

@kalabuni · 22.07.2013, 00:02

onclick - это не самое лучшее событие при обработке тегов <select> и <option>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<select onfocus="if (!self.FLAG)
                   {
                   FLAG = true;
                   for (var j = 0; j < 5; j++)
                      {
                      var opt = document.createElement ('option');
                      opt.value = opt.text =  'new ' + (j + 1);
                      this.options.add (opt);
                      }
                   }">
<option></option>
</select>

@Vitukr · 22.07.2013, 00:30 **[ТС]**

Замена onclick на onfocus не помогает.
Сейчас попробовал onmouseover. Срабатывает как надо если не сразу кликать по селекту.
Другими словами, необходимо время для получения списка и добавления его в селект.
Каким образом сделать такую задержку?

Суть в том, что в селекте должен быть определенный список, из которого пользователь должен выбрать.
Но загружать список вместе с загрузкой страницы не подходит.
Поэтому, при загрузке страницы, в селект загружается только один пустой option.
Пользователь не знает, что селект пустой (пока селект не раскрыт), для пользователя там есть список, из которого надо выбрать.
Поэтому, пользователь нажимает на раскрытие списка селекта, и в этот момент, список должен обновится, т.е. добавиться реальный список и показаться пользователю.
После этого пользователь выбирает в этом списке и далее срабатывает onchange.

Чтобы понятно было приведу код.
При загрузке страницы селект такой:

HTML5
1
2
<select onclick="getOptions()">
                <option value=""></option>

При клике пользователем для раскрытия списка селект длжне стать таким:

HTML5
1
2
3
4
5
<select onclick="getOptions()">
                <option value=""></option>
<option value="Текст1">Текст1</option>
<option value="Текст2">Текст2</option>
<option value="Текст3">Текст3</option>

@kalabuni · 22.07.2013, 06:57

Сообщение от Vitukr

Замена onclick на onfocus не помогает.

вы хоть пробовали запустить код, который я вам дал?

попробуйте запустить, авось увидите, что "помогает"

@Vitukr · 22.07.2013, 12:20 **[ТС]**

Сообщение от kalabuni

вы хоть пробовали запустить код, который я вам дал?

попробуйте запустить, авось увидите, что "помогает"

Извините, не пояснил.
Ваш код в чистом виде работает.
Но, у меня код AJAX обернут в функцию.
Поэтому, я не стал подставлять Ваш код добавления опций, а просто сменил событие с onclick на onfocus, и почему-то вчера у меня не заработало. Возможно была ошибка в коде в другом месте.
Когда сегодня, на свежую голову, вновь поменял onclick на onfocus, все заработало.
Большое спасибо за настойчивость помочь.

Добавлено через 1 час 13 минут
kalabuni,
Извините за беспокойство.
Но в ИЕ10 (у меня установлен) ни Ваш, ни мой код не работает.
А фича моего кода заключается в том, что при async: false, onfocus работает (во всех браузерах, кроме ИЕ), а с true не работает. Поэтому вчера onfocus у меня не работал, а сегодня я забыл, что успел добавить async: false.

Если поможете побороть ИЕ, буду очень благодарен.

@Vitukr · 23.07.2013, 18:12 **[ТС]**

В Internet Explorer тег select создается по-новому, если в него добавить option через JavaScript.
В итоге, если я добавляю option через событие onfocus, во всех браузерах, кроме Internet Explorer, при клике по select (т.е. добавление option происходит динамически в момент клика), dropdown list select'a остается открытым для последующего выбора из списка.
Только в Internet Explorer этого не происходит, так как тег (элемент) select пересоздается, который по-умолчанию создается со свернутым dropdown list.

Вопрос: Каким образом через код заставить dropdown list раскрыться без дополнительного клика на select?

Для примера, это видно на этом коде:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<select onfocus="if (!self.FLAG)
                   {
                   FLAG = true;
                   for (var j = 0; j < 5; j++)
                      {
                      var opt = document.createElement ('option');
                      opt.value = opt.text =  'new ' + (j + 1);
                      this.options.add (opt);
                      }
                   }">
<option></option>
</select>

@kalabuni · 23.07.2013, 18:58

увы, помочь не могу, MSIEv10 на компьютере не имею
то, о чём вы пишете, проверить не могу

@Vitukr · 23.07.2013, 19:20 **[ТС]**

Сообщение от kalabuni

увы, помочь не могу, MSIEv10 на компьютере не имею
то, о чём вы пишете, проверить не могу

Вот здесь упоминается проблема, не знаю нарушаю ли правила давая ссылку:
http://stackoverflow.com/quest... work-in-ie

@dunmaksim · 28.08.2013, 16:42

Я бы сделал так:

JavaScript
1
$("#idСписка").one("click", loadData).on("change", selectOption);

где loadData и selectOption соответственно функции, выполняющие загрузку списка и действие, выполняемое при выборе какого-нибудь элемента. Привязка события должна выполняться во время загрузки страницы (т. н. "ненавязчивый JavaScript").
Получить выбранное значение очень просто:

JavaScript
1
$("#idСписка:selected").val();

Добавлено через 16 минут
А обработка события наведения мыши - это же onmousemove, соответственно, код нужно изменить вот так:

JavaScript
1
$("#idСписка").one("mousemove", loadData).on("change", selectOption);

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Vitukr 14 / 4 / 1 Регистрация: 08.11.2012 Сообщений: 189 Записей в блоге: 1

	Обновить select после добавления options через javascript 21.07.2013, 23:53. Показов 10740. Ответов 8 Метки нет (Все метки) На странице есть элемент select с одним пустым option. По событию onclick (при этом раскрывается список options, где один пустой option) добавляю options, например, через jquery .append, заодно убираю событие onclick. После отработки события onclick, список опций остается раскрыт в том же состоянии - один пустой option, хотя реально есть все добавленные опции. Но, чтобы увидеть новый список добавленных опций, необходимо дважды кликнуть на select, т.е. первый клик закрывает старый список и второй клик открывает новый, уже с добавленными опциями. Это очень неудобно для пользователя, да и догадаться будет трудно так делать. Как сделать так, чтобы после добавления новых опций к селекту, раскрытый список селекта обновлялся без лишних кликов. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	23.07.2013, 18:58
	увы, помочь не могу, MSIEv10 на компьютере не имею то, о чём вы пишете, проверить не могу 0