Я не могу в это поверить, но нашел JS код, который отлично работает в IE 11, но не работает в Chrome (версия 81).
Я обновляю один мультиселектор с другой, сохраняя параметры отсортированы. Итак, у меня есть для него функция:
/**
* Move the options defined by <sel> from select tag <from> to select tag <to>
* @param from The source SELECT tag jQuery object
* @param to The destination SELECT tag jQuery object
* @param sel Either: "option" for all, or "option:selected"
*/
function moveOpt(from, to, sel) {
var opts = from.children(sel).removeAttr('selected').remove().get();
opts = opts.concat(to.children('option').remove().get());
opts.sort(function (a, b) {
return a.value.localeCompare(b.value);
});
to.append(opts);
/*
// Chrome doesn't re-render the opts until they are selected and then focus is lost ???
window.setTimeout(function() {
to.children('option').attr('selected', 'selected').trigger('click');
from.trigger('focus');
to.children('option').removeAttr('selected');
}, 1);
*/
}
. Это прекрасно работает в IE 11, но в chrome параметры перемещаются, но вы не можете видеть их в браузере. Они там, потому что если вы «осмотрите» элемент SELECT, все теги OPTION будут там, а также выполнение $(to).children().length покажет правильный номер.
Если я раскомментирую некрасивый HACK (вызов window.setTimeout()) тогда Chrome наконец-то правильно покажет опции. Но это ОРЕХИ, чтобы сделать это. Я должен делать что-то не так. Кто-нибудь знает, что это за что-то?
Вот скрипка JS, показывающая проблему - Запуск ее в IE (режим только для чтения) показывает, что она работает, Chrome делает не.
ОБНОВЛЕНИЕ
Я попытался обновить jQuery с 1.10.2 до 3.5.0 и все еще не работал.
Также, как указывает @ZacharyYaro, он работает в Chrome 80, но не 81.
Изменение этого значения:
to.append(opts);
На это:
var toElm = to.get()[0];
$.each(opts, function(i,v) { toElm.appendChild(v); });
Устраняет проблему.