select2 clone Копирование блоков содержащих селект2 и повторная привязка события -- как быть, Удаление span со значением
Primary tabs
Ситуация
Происходит копирование html-кода select-а, к которому привязан select2.
По теме
Сразу отметим, что селект2 по сути добавляет дополнительный span, который и является видимым представлением селектбокса, сам же селектбокс скрывается.
Если просто после клонирование выполнить повторную привязку, то мы получим два спана.
Также в случае если вы производите клонирование с data-атрибутами, то вызов .select2('destroy') приведёт к затрагиванию оригинала (который клонируется).
Как рекомендуется клонировать (легко)
$select.select2('destroy').clone().select2();
-- но если вы клонируете реально отображаемый на странице элемент, то это очень неудобно, так как это файтически удаляет селект2 с образца (который клонируется).
Просто удаляем старый span
Можно использовать такой подход для переинициаллизации:
/** * Remove select2 span container * * @returns {type.fn.removeSelect2Span.$this} */ $.fn.removeOldValueText = function () { var $this = $(this); // your select var $oldSpan = $this.next('span.select2-container'); // console.log('$oldSpan:', $oldSpan); $oldSpan.remove(); // удаляем отображаемый спан $this.empty(); // удаляем options select-элемента return $this; } $clonedElement.removeSelect2Span(); // удаляем старое $clonedElement.select2(); // заново инициллизируем
-- это сработает и для тех элементов, что инициллизированны (судя по практике можно не боятся повторной инициллизации select2).
Нам пришлось выполнить:
$this.empty(); // удаляем options select-элемента
так как, если в исходном селекте уже было выбрано значение. но при повторной инициаллизации на копии селект2 выставит именно его, а часто нужно чтобы ничего не было выбрано.
- Log in to post comments
- 3269 reads