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')

就像我说的那样，销毁select2很好，但是当重新初始化它们时，只允许每个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();

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

用jQuery复制select2选择的问题

1 个答案: