Как динамически добавлять options к select после того как он уже открыт?

Question

[Максим Васильев]

Цель: каждый раз при открытии select-меню запрашивать где-нибудь список опций и генерить меню на лету.

Попытка решения: повешать на onfocus обработчик, который генерит и добавляет новые options.
По ссылке embed.plnkr.co/B0303y/preview вариант реализации на jquery и несколько на angular.

В firefox всё работает чудесно.
А в хроме выпадающее меню не перерисовывается, в лучшем случае вместо этого добавляется скролбар.
В других браузерах не пробовал.

Но чисто по человечески, я вполне понимаю хром. Выпадающий список рисуется уже в ui браузера, которое какбы не обязано динамически следить за происходящим на странице.
И не уверен, что в очередной версии файрфокса всё останется чикипуки.

Вопрос: как ещё можно провернуть такой фокус, чтобы не сильно пугать этим браузер?

Answer 1

[Виталий Инчин ☢]

Использовать свой нестандартный список

Comments

[Максим Васильев]

Всмысле - select полностью на html?

Вот даже уже нашёл вкусняшку https://github.com/angular-ui/ui-select
Но тамже полюбому куча друихх проблем повыпадывает.

[Виталий Инчин ☢]

qmax: Да. Из проблем может быть только поддержка рассыпающимися браузерами, но это уже надо для каждой вкусняшки отдельно смотреть.

Answer 2

[_ _]

Оборачиваете select в доп. элемент, в котором в самом конце добавляете невидимый div на высоту select, чтобы он был поверх select и не пропускал к нему click. При клике на этот див запускаете запрос, обновляя ui классом типа loading, на который с помощью css вешаете анимацию загрузки. После получения данных публикуете их в скоуп и инициируете фэйковое событие "клик" на элементе селекта.
Если нужен пример директивы - напишите в комментарии.

Comments

[Максим Васильев]

Уже нашёл готовую директиву ui-select. Полностью на хтмл.
Индикатора загрузки правда нету...

[_ _]

qmax: от ui-select остались очень мрачные впечатления, в свое время. Выбрал selectize.

Answer 3

[Mycolaos]

Можете использовать React.js

Вот еще VanillaJS, прекрасно работает в Хроме:

<select onclick='loadOptions(event)'></select>

<script>
function loadOptions(e) {
  setInterval(function () {
    var o = document.createElement('option');
    o.innerHTML = 'hello';
    e.target.appendChild(o);
  }, 500);
}
</script>

Comments

[Максим Васильев]

ну не. мне ангуляр нужен.

[Mycolaos]

А чем ваниль плоха?
Ну если только Angular(он jQuery использует), то $(e.target).append( "<option>Hello</option>" );

[Максим Васильев]

Mycolaos: плоха тем, что не работает. (первый пример по ссылке)

[Mycolaos]

qmax: Ок... А так? https://jsfiddle.net/aLcuz6Lv/

[Максим Васильев]

это не работает в хроме (45.0.2454.101)

[Mycolaos]

45.0.2454.101 — всё прекрасно работает. Разве что проверку на тэг добавить, чтоб опции к опциям не прибавляло.

if(e.target.tagName !== 'SELECT')
   return;

[Mycolaos]

qmax: а если добавить обертку чуть уже сэлекта (с overflow-x: hidden) — так и вовсе прекрасно, без скрола.

[Максим Васильев]

"прекрасно работает" - это с одного нажатия, или после того как открыли/закрыли/снова открыли?

[Mycolaos]

qmax: именно с одного. Нужно подождать 500 мс, там ведь асинхронная загрузка симулируется. Вот еще более продвинутая версия https://jsfiddle.net/aLcuz6Lv/4/