Обновить 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);

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

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

	Обновить select после добавления options через javascript 21.07.2013, 23:53. Показов 10786. Ответов 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