Question 36319 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Select2 Multiple not working with Form repeater – Jquery

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" class="row gy-2 gx-3 align-items-center outer-repeater" enctype="multipart/form-data">

  <div data-repeater-list="group-qrcode">
    <div data-repeater-item="data-repeater-item" class="row" style="border: 1px solid darkblue">
      <div class="form-group col-md-2">
        <label for="forname">
          Name</label>
        <input id="forname" name="name" class="form-control input-mask text-start"/>
      </div>
      <div class="form-group col-md-3">
        <label for="forname">Email</label>
        <select class="select2 form-control select2-multiple" 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 class="form-group col-md-3">
        <label for="forname">Phone</label>
        <select class="select2 form-control select2-multiple" 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 class="col-lg-2 align-self-center">
        <div class="d-grid">
          <input data-repeater-delete="data-repeater-delete" type="button" class="btn btn-danger" value="Delete Contact"/>
          <br/>
        </div>
      </div>

    </div>
  </div>
  <br/>
  <input data-repeater-create="data-repeater-create" type="button" class="btn btn-success mt-3 mt-lg-0" value="Add Contact"/>
  <br/>

  <div class="col-sm-auto">
    <input type="submit" name="contact" value="Add Contact" class="btn btn-primary w-md"></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);
            }
        }]
    });
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    <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>

  2. 0

    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();
},
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search