Form repeater is not working with select2

[mttariqi]

I am using form repeater and selct2 together, at start it works perfectly fine, mean when page refresh once I click on add new, slect2 field repeat its self but its layout and everything got changed.

[superipey]

you should reinitiate select2 in show function

[bebaps]

Here is an example of how you can get that to work. Note how you need to initiate the Select2 in both the ready and show methods. The initiation within the ready method will ensure that it works for the very first repeater, the initiation within the show method will ensure that it works within the additional repeaters added to the DOM.

In my case, I had to also tell Select2 where to attach additional instances, but your usage may vary.

[garbinmarcelo]

I am facing problems with select2. When I add a new line with select2 the previous one disappears. This package does not seem to receive updates for a long time, is there any alternative that has solved this problem? Do you still use it?

Thanks

[cesarmtz93-wit]

@garbinmarcelo did you manage to solve this? facing the same issue

[garbinmarcelo]

@garbinmarcelo did you manage to solve this? facing the same issue

Not really, I ended up working on another project in that time, but I would like to know if there is a solution for that.

[cesarmtz93-wit]

@garbinmarcelo i manage to solve my issue by doing this, hope this helps you

i can add multiple items and all will work with the select2 library

$('#repeater').repeater({
    initEmpty: false,
    isFirstItemUndeletable: true,
    show: function () {
        $(this).slideDown();
        $(this).find(".select2").select2();
    },
    hide: function (deleteElement) {
        $(this).slideUp(deleteElement);
    }   
});

[mtariq786]

I did work for me, I got this somewhere from StackOverflow If I remember correctly, but forget the link!

    $(".select2").select2({
        placeholder: "Select Value",
    });

    $('.repeater-button').repeater({
        show: function () {
            $(this).slideDown();
            $('.select2-container').remove();
            $('.select2').select2({
                placeholder: "Select Value",
                allowClear: true
            });
            $('.select2-container').css('width','100%');
        },
        hide: function (remove) {
            if(confirm('Confirm Question')) {
                $(this).slideUp(remove);
            }
        }
    });

[cristiano-federico]

I'm having issues about this because everytime I add a new row the name is messed up with square brackets, ex: group-b[0][field_name[]][]

then if I add a new row the previous one removes square brackets and becomes group-b[0][field_name][] (as I think it should be) and the new one is messed up: group-b[1][field_name[]][]

[jigapate]

Is anyone able to work select2 with form repeater?

[parminderjit-s]

it doesn't work with select2 multiple selections.

[naveedshahzadofficial]

it is working, you should do this.

$('.m_repeater_section').repeater({
        initEmpty: false,

        defaultValues: {
            'text-input': 'foo'
        },

        show: function() {
            $(this).slideDown();
            $(this).find('.select2').removeClass('select2-hidden-accessible');
            $(this).find('.select2-container').remove();
             $(this).find('.select2').select2();
        },

        hide: function(deleteElement) {
            if(confirm('Are you sure you want to delete this element?')) {
                $(this).slideUp(deleteElement);
            }
        },
       isFirstItemUndeletable: true
    });

[HasanMu]

$(this).find('.select2').removeClass('select2-hidden-accessible'); $(this).find('.select2-container').remove(); $(this).find('.select2').select2();

Thank You! it's working fine

[nicks6853]

If anyone is having problems with select2 in the repeater, what happened for me is that when a repeater item was added the select tags would have the same id as the first repeater item. As I would add more items, the previous selects would stop working. In my case I had two select tags inside each repeater item so I had to iterate through them (you'll see in the code). You can remove the id from the generated select in the new repeater item to fix the issue.

show: function () {
  $(this).slideDown();

  // Edit this selector for your select tags
  $(this).find('select[data-input-field="select-dropdown"]').each(function(index) {
    $(this).removeAttr('id');
    $(this).select2();
  });
},

[htetzawphyo]

how to remove search in select2

[uberfresh]

The solutions work with a normal select input but not with multiple=True ones. For example, if you create select2 input with multiple attribute and repeat them, only the last one will be initialized.

[vjrjunior]

I invested some time trying to find the best way to make Select2 work with jquery-repeater. I was using the solution from @mtariq786 , but I still encountered some issues.

After testing, I came up with the following solution that works for both multiple and single select elements:

Problem:

When adding the new item in the following way, the new item worked, but the existing one lost its Select2 functionality:

$('.select2-container').remove();
$('.select2').select2({
    placeholder: "Select Value",
    allowClear: true
});

Solution:

I removed the id from my select elements and controlled them with a data attribute. To keep the semantic structure, I wrapped the select element inside a label:

<label>
  <span class="form-label">Label</span>
  <select class="form-select" name="name" data-select-type="select2" data-placeholder="Placeholder" aria-label="Label" style="width: 100%;">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</label>

And in the JavaScript, I ensured that the Select2 is properly initialized and re-initialized:

$('.repeater').repeater({
  ready: function () {
    $('[data-select-type="select2"]').select2();
  },
  show: function () {
    $(this).find('[data-select-type="select2"]').select2();
    $(this).slideDown();
  },
  hide: function (deleteElement) {
    $(this).slideUp(deleteElement);
  },
});

This approach solved my issues with Select2 and jquery-repeater, making both single and multiple select elements work smoothly.