What I am trying to do? I am trying to use form repeater with select2 multiple. This will select multiple email's and phone's from select2 search.

What is happening? Select2 is showing and gets selected only for first entry. I am successfully able to select multiple email and multiple phone.

What is the issue? There is no data showing up for both email and phone for the next entry of name in the form repeater.

<link href="/libs/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>

<form action="" method="post"  enctype="multipart/form-data">

  <div data-repeater-list="group-qrcode">
    <div data-repeater-item="data-repeater-item"  style="border: 1px solid darkblue">
      <div >
        <label for="forname">
          Name</label>
        <input id="forname" name="name" />
      </div>
      <div >
        <label for="forname">Email</label>
        <select  name="email" multiple="multiple" data-placeholder="Choose ...">
          <option value="email">email</option>
          <option value="email1">email1</option>
          <option value="email2">email2</option>
        </select>
      </div>
       <div >
        <label for="forname">Phone</label>
        <select  name="phone" multiple="multiple" data-placeholder="Choose ...">
          <option value="phone">phone</option>
          <option value="phone1">phone1</option>
          <option value="phone2">phone2</option>
        </select>
      </div>

      <div >
        <div >
          <input data-repeater-delete="data-repeater-delete" type="button"  value="Delete Contact"/>
          <br/>
        </div>
      </div>

    </div>
  </div>
  <br/>
  <input data-repeater-create="data-repeater-create" type="button"  value="Add Contact"/>
  <br/>

  <div >
    <input type="submit" name="contact" value="Add Contact" ></input>
  </div>
</form>

<script>
// Select2
$(".select2").select2();
</script>
<script src="/libs/select2/js/select2.min.js"></script>
<script src="/libs/jquery.repeater/jquery.repeater.min.js"></script>

<script src="/js/pages/form-repeater.int.js"></script>

Below is the code for form-repeater.int.js

$(document).ready(function () {
    'use strict';

    $('.repeater').repeater({
        defaultValues: {
            'textarea-input': 'foo',
            'text-input': 'bar',
            'select-input': 'B',
            'checkbox-input': ['A', 'B'],
            'radio-input': 'B'
        },
        show: function () {
            $(this).slideDown();
        },
        hide: function (deleteElement) {
            if(confirm('Are you sure you want to delete this element?')) {
                $(this).slideUp(deleteElement);
            }
        },
        ready: function (setIndexes) {

        }
    });

    window.outerRepeater = $('.outer-repeater').repeater({
        defaultValues: { 'text-input': 'outer-default' },
        show: function () {
            console.log('outer show');
            $(this).slideDown();
        },
        hide: function (deleteElement) {
            console.log('outer delete');
            $(this).slideUp(deleteElement);
        },
        repeaters: [{
            selector: '.inner-repeater',
            defaultValues: { 'inner-text-input': 'inner-default' },
            show: function () {
                console.log('inner show');
                $(this).slideDown();
            },
            hide: function (deleteElement) {
                console.log('inner delete');
                $(this).slideUp(deleteElement);
            }
        }]
    });
});

CodePudding user response：

As long as select2 is binded to visible elements on page load you need to re-init select2 once new row of repeater is added. You should trigger $(".select2").select2(); in show() event.

So it could look like this:

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

CodePudding user response：

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

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