不使用表单中继器的Select2倍数

Question

我想做什么？我正在尝试使用带有select2倍数的表单中继器。这将从select2搜索中选择多个电子邮件和电话。

这是怎么回事？Select2正在显示，并且只为第一项选择。我能够成功地选择多个电子邮件和多个电话。

有什么问题吗？在表格中继器中的下一个姓名条目中，电子邮件和电话都没有显示数据。

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

下面是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);
            }
        }]
    });
});

Answer 1

只要select2绑定到页面加载上的可见元素，一旦添加了新的中继器行，您就需要重新插入select2。您应该在$(".select2").select2();事件中触发show()。

所以看起来是这样的：

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

Answer 2

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