Как клонировать селект с изменением id?

Question

[Иван Симонов]

Есть код.

Использую selectize для стилизации select.

При клонировании не получается для клонов select задать новый id.
Как это сделать?

Answer 1

[0xD34F]

Очень странный способ клонировать select'ы - сохранить настройки плагина клонируемых элементов, деактивировать плагин на клонируемых элементах, клонировать элементы, инициализировать плагин у клонов и повторно у оригиналов, обновить настройки. Можно сделать попроще: в самом начале сделать клон элементов, и потом уже клонировать его; инициализацию плагина вынести в отдельную функцию, которая будет принимать набор элементов.

Странный способ получать новые значения id - единица в качестве начального значения и постфиксный инкремент. В результате последовательность идентификаторов получается такая: 1, 2, 3,... Элементы с 1 и 2 уже есть. Начальным значением должно быть максимальное существующее значение плюс единица. Или просто максимум, но инкремент тогда префиксный.

const $row = $('.b-items').clone();
let ID = +$row.find('select').last().attr('id').split('-').pop();

function selectize($el) {
  $el.selectize({
    allowEmptyOption: true,
    create: true,
  });
}

selectize($('select'));

$('.btn-clone').on('click', function() {
  selectize($row
    .clone()
    .insertBefore(this)
    .find('select')
    .attr('id', () => `select-${++ID}`)
  );
});

Comments

[Иван Симонов]

Спасибо. Сделал с вариант с преффиксным инкрементом, но почему работает не корректно

[0xD34F]

Ответ обновил. Похоже на то, что вам надо?

[Иван Симонов]

0xD34F, Да. разбираюсь

Answer 2

[Alams Stoyne]

Всё проще:

$('select').selectize({
  allowEmptyOption: true,
  create: true
});
var cloneID = 1;
$(document).on('click', '.btn-clone', function(e) {
  e.preventDefault();
  var lastRow = $(this).parents('.b-parent').find('.b-items').last();
  cloneID = lastRow.find('select').size();
  var newRow = lastRow.clone().insertAfter(lastRow);
   newRow.find('select').each(function(e) {
   	cloneID++;
   	$(this).attr("id","select-"+cloneID);
   });
});

Comments

[Иван Симонов]

Спасибо. id добавляется - здесь все ок, но почему то не происходит инициализация селекта selectize - https://jsfiddle.net/2d1vk0np/3/

[Alams Stoyne]

Так инициализируй селект сразу как сменил ID
$(this).attr("id","select-"+cloneID).selectize();

[Иван Симонов]

Alams Stoyne, Спасибо. Разобрался

[Иван Симонов]

Иван Симонов, Еще вопрос. Есть код - Есть код. Получается необходимо клонировать item блок, а также весь row. Как правильно это реализуется?