当我使用 jquery 动态添加新表单输入时，Select2 输入不起作用

Question

在我的表单中，我试图在用户按下添加按钮时添加一个新的 form-row。

<div class="form-row mb-2">
        <div class="form-group col-md-3 my-2">
          <label>File</label>
          <select name="fileType-0" class="js-example-basic-single form-control" required>
            <option></option>
            <option value="Invoice">Invoice</option>
            <option value="Other">Other</option>
          </select>
        </div>

        <div class="form-group col-md-4 my-2">
          <label>Select</label>
          <input name="fileName-0" type="file" class="form-control-file" multiple="false">
        </div>

        <div class="form-group col-md-1">
          <label>BTN</label>
          <button class="btn btn-primary addInput"><i class="fas fa-plus"></i></button>
        </div>
      </div>

按钮工作正常，表单行已添加。但是 select2 输入在重复的行中不起作用..

$('.js-example-basic-single').select2();

var counter = 0;
$('#form')
  .on('click', '.addInput', function() {
    counter++;
    var $template = $('.form-row').slice(-1).clone(true, true).find('input').end()
      .find('.addInput').removeClass('addInput').addClass('removeInput').end()
      .find('[name^="fileType-"]').attr('name', 'fileType-' + counter).val("").attr('tabindex', counter).val("").end()
      .find('[name^="fileName-"]').attr('name', 'fileName-' + counter).val("").attr('tabindex', counter).val("").end()
      .find('i').removeClass('fa-plus').addClass('fa-minus').end();
    $template.insertAfter('.form-row:last');
    $('.form-control:last').focus();
  })

  // Remove button click handler
  .on('click', '.removeInput', function() {
    var $row = $('.form-row').slice(-1);
    counter--;
    $row.remove();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-12">
    <form id="form" role="form" enctype="multipart/form-data">
      <div class="form-row mb-2">
        <div class="form-group col-3 my-2">
          <label>Type</label>
          <select name="fileType-0" class="js-example-basic-single form-control" required>
            <option></option>
            <option value="Invoice">Invoice</option>
            <option value="Other">Other</option>
          </select>
        </div>

        <div class="form-group col-5 my-2">
          <label>Select</label>
          <input name="fileName-0" type="file" class="form-control-file" multiple="false">
        </div>

        <div class="form-group col-1">
          <label>BTN</label>
          <button class="btn btn-primary addInput"><i class="fas fa-plus"></i></button>
        </div>
      </div>

      <div class="row mb-3">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>
  </div>
</div>

Answer 1

问题在于克隆 Select2 生成的元素。这些元素始终引用第一行的 select 元素。

将您的脚本改成这样可以解决问题：

var selectTemplate = $('.form-row').slice(-1).find('select').clone();

$('.js-example-basic-single').select2();
var counter = 0;
$('#form')
  .on('click', '.addInput', function() {
    counter++;

    var $template = $('.form-row').slice(-1).clone(true, true).find('input').end()
      .find('.addInput').removeClass('addInput').addClass('removeInput').end()
      .find('[name^="fileType-"]').attr('name', 'fileType-' + counter).val("").attr('tabindex', counter).val("").end()
      .find('[name^="fileName-"]').attr('name', 'fileName-' + counter).val("").attr('tabindex', counter).val("").end()
      .find('i').removeClass('fa-plus').addClass('fa-minus').end()
      .find('.form-group.col-3.my-2 :not(label)').remove().end()
      .find('.form-group.col-3.my-2 label').after(selectTemplate.clone()).end();
    $template.insertAfter('.form-row:last');
    $('.js-example-basic-single').select2();
    $('.form-control:last').focus();
  })

  // Remove button click handler
  .on('click', '.removeInput', function() {
    var $row = $('.form-row').slice(-1);
    counter--;
    $row.remove();
  });

当我使用 jquery 动态添加新表单输入时，Select2 输入不起作用

Select2 input doesn't work when I add a new form input dynamically with jquery

javascript

jquery

jquery-select2