Обновить 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 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

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

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