用jQuery复制select2选择的问题

Question

我正在做一个需要创建可扩展表格的项目，因此用户可以通过单击“添加新项目”按钮输入任意数量的项目，该按钮将克隆一行并允许他们选择要添加到新项目中的选项。形成。

到目前为止，要完成此操作，我们有一排元素，如下所示：

<div class="input-group">
  <select class="form-control name-select" name="name">
    <option value disabled selected>Component Name</option>
  </select>
  <select class="form-control type-select" name="sale_type">
    <option value disabled selected>Sale Type</option>
    <option value="1">type 1</option>
    <option value="2">type 2</option>
  </select>
  <input type="input" class="form-control" placeholder="number">
  <input type="text" class="form-control" placeholder="Total number" readonly>
  <input type="text" class="form-control" placeholder="Cost per item" readonly>
  <input type="text" class="form-control" placeholder="Total cost" readonly>
</div>

我们目前仅在前端工作，但是这些选择将包含很多选项。

我的问题是，我们需要能够复制这一行，并且仍然能够使用select2框。 通过查看它，我们意识到我们需要销毁select2，将其克隆，然后重新初始化。 这不是问题，但是由于某些原因，当我们复制项目行时，除了最近创建的一个选择框之外的所有select2框都只是普通选择。 好像它只允许每个select2都不理想，因为我们需要所有它们都起作用才能使从一长串选项中轻松选择。

我们用来复制项目的代码是：

var base = element.find('.item-row.base').first();

base.find('.name-select').select2('destroy');
base.find('.type-select').select2('destroy');

var itemRowClone = base.clone();

itemRowClone.removeClass('base')

itemRowClone.find('select').each(function(){
    $(this).attr('name', $(this).attr('name') + element.find('.item-row').length)
});

element.find('.new-items').append(itemRowClone);

base.find('.name-select').select2();
base.find('.type-select').select2();

itemRowClone.find('.name-select').select2();
itemRowClone.find('.type-select').select2();

console.log('reinitialised')

就像我说的，销毁select2s很好，但是当它重新初始化它们时，只允许每个select的一个实例为select2，其余的都是默认选择。

如果有人有任何想法，那就太好了！

提前致谢

Answer 1

最后，我通过复制select2标签而不破坏它来使其工作。 然后，手动删除由select2直接在select标签之后生成的span标签。 然后，我删除了类select2-hidden-accessible和属性data-select2-id ，然后在选择标记上调用了select2()方法。

itemRowClone.find('span.select2').remove();
itemRowClone.find('select').removeClass('select2-hidden-accessible');
itemRowClone.find('select').removeAttr('data-select2-id');

arrangement.find('.new-items').append(itemRowClone);

itemRowClone.find('.name-select').select2();
itemRowClone.find('.type-select').select2();

希望在这种情况下能对其他人有所帮助！