用jQuery复制select2选择的问题

Question

I'm working on a project where we need to create an expandable form, so the user can input any number of items by clicking an 'add new item' button which will clone a row and allow them to select new options to add into the form.

To do this so far we have a row of elements as shown:

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

We are currently just working on the front end, but these selects will have lots of options in.

My issue is that we need to be able to duplicate this row and still be able to use the select2 boxes. From looking into it we realise that we need to destroy the select2, clone it, then reinitialise it. This is not an issue, but for some reason, when we duplicate the row of items, all select2 boxes except the most recently created one are just normal selects. It's as if it's only allowing one of each of the select2's which isn't ideal because we need all of them to work to allow ease of selection from the long list of options.

The code we are using to duplicate the items is:

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

Like I said, it's destroying the select2s just fine, but when it re-initialises them it's only allowing one instance of each select to be select2, the rest are all default selects.

If anyone has any ideas then that would be amazing!

Thanks in advance

Answer 1

In the end, I got it working with by duplicating the select2 tags as it was, without destroying it. Then manually removing the span tag which is generated by the select2 which is directly after the select tag. Then I removed the class select2-hidden-accessible , and the attribute data-select2-id and then called the select2() method on the select tags.

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();

Hope this helps someone else in this situation!