Варианты клонирования select2
Я пытаюсь клонировать select2 с его параметрами, но, похоже, это не работает.
Я пытался уничтожить перед воссозданием, удалить промежуток перед воссозданием, но ничего не работает. Вот основной код.
HTML:
<div class = "container">
<div class = "row" id = "row_0">
<div class = "col-md-12">
<form id = "form_0" onsubmit = "return false;">
<select class = "select2" name = "test1" id = "test1_0">
<option value = "o_test">o_test1_1</option>
<option value = "o_test">o_test1_2</option>
<option value = "o_test">o_test1_3</option>
</select>
<select class = "select2" name = "test2" id = "test2_0">
<option value = "o_test">o_test2_1</option>
<option value = "o_test">o_test2_2</option>
<option value = "o_test">o_test2_3</option>
</select>
<button onclick = "addRow()">clone</button>
</form>
</div>
</div>
</div>
Javascript:
function addRow() {
var div = $('div[id^ = "row"]:last');
var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
var clone = div.clone().prop('id', 'row_'+num );
div.after( clone );
}
$(".select2").select2();
Вот рабочий пример, содержащая мою проблему: https://jsfiddle.net/L5mn63g7/25/
Итак, есть идеи, в чем может быть проблема? Чтобы иметь возможность клонировать select2 С его параметрами.
@SvenHakvoort есть много тем, в которых говорится об этой проблеме, но каждая из них отличается, и на самом деле ни одна из них не предлагает решение моей проблемы, если вы думаете, что ссылка решает мою проблему, не стесняйтесь показать мне, как, как я не смог =) Но спасибо за ваш комментарий.
—
23.11.2018 11:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
781
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Удалите теги span перед клонированием и повторно привяжите select2 к клонированным раскрывающимся спискам.
Надеюсь, это поможет тебе.
function addRow() {
var div = $('div[id^ = "row"]:last');
var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
var clone = div.clone().prop('id', 'row_'+num );
clone.find('[id]').each(function(){var $this = $(this); $this.prop('id', $this.prop('id').split('_')[0] + '_' + num);});
clone.find("span").remove();
clone.find(".select2").select2();
clone.find(".select2-container").css("width","300px")
div.append( clone );
}
$(".select2").select2();select {
width: 300px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel = "stylesheet" />
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class = "container">
<div class = "row" id = "row_0">
<div class = "col-md-12">
<form id = "form_0" onsubmit = "return false;">
<select class = "select2" name = "test1" id = "test1_0">
<option value = "o_test">o_test1_1</option>
<option value = "o_test">o_test1_2</option>
<option value = "o_test">o_test1_3</option>
</select>
<select class = "select2" name = "test2" id = "test2_0">
<option value = "o_test">o_test2_1</option>
<option value = "o_test">o_test2_2</option>
<option value = "o_test">o_test2_3</option>
</select>
<button onclick = "addRow()">clone</button>
</form>
</div>
</div>
</div>Вы должны сначала уничтожить select2 перед клонированием и изменить имя селектора для select2 на другое. Вот рабочее решение
function addRow() {
$('.items').select2("destroy");
var div = $('div[id^ = "row"]:last');
var num = parseInt(div.prop("id").match(/\d+/g), 10) + 1;
var $clone = div.clone().prop('id', 'row_' + num);
$clone.find('[id]').each(function() {
var $this = $(this);
$this.prop('id', $this.prop('id').split('_')[0] + '_' + num);
});
div.after($clone);
$('.items').select2();
}
$(".items").select2();<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class = "container">
<div class = "row" id = "row_0">
<div class = "col-md-12">
<form id = "form_0" onsubmit = "return false;">
<select class = "items" name = "test1" id = "test1_0">
<option value = "o_test">o_test1_1</option>
<option value = "o_test">o_test1_2</option>
<option value = "o_test">o_test1_3</option>
</select>
<select class = "items" name = "test2" id = "test2_0">
<option value = "o_test">o_test2_1</option>
<option value = "o_test">o_test2_2</option>
<option value = "o_test">o_test2_3</option>
</select>
<button onclick = "addRow()">clone</button>
</form>
</div>
</div>
</div>Другие вопросы по теме
Fabric.js Изменить размер объекта не работает должным образом
Как оживить мой элемент с помощью Anime.JS?
Включение и отключение дат jquery с помощью datepicker
Обработка раскрывающегося события Bootstrap в jQuery
Закройте все подменю, когда пользователь нажимает где-нибудь на странице
Как изменить страницу в клинке для JavaScript (Laravel)
Я хочу отображать на странице только одну строку
Умножение входных значений на диапазон
Загрузка файла JQuery путь к файлу возврата в виде гиперссылки
Как дождаться завершения всех загрузок jquery
Похожие вопросы
Как подключиться к функциям обработчика событий JavaScript?
Fabric.js Изменить размер объекта не работает должным образом
Добавьте URL-адрес элемента списка и добавьте его как ссылку на кнопку
Как оживить мой элемент с помощью Anime.JS?
Почему перенос кода javascript во внешний скрипт вызывает ошибки
React / Webpack / TypeScript - компоненты не импортируются динамически
Медиа-запросы в стилизованном компоненте, объявленном с помощью объекта
Как удалить пробел с последнего элемента в массиве Javascript
Создание и заполнение 3D-массива JavaScript
React Virtualized: липкий контент в коллекции
Возможный дубликат Клонированный Select2 не отвечает