如何使用类名动态添加select2？

Question

我想用 class 名称添加 select2 个实例的新行。它使用 select 创建了一个新行，但由于某种原因无法点击。

          var maxGroup = 10;
          //add more fields group
          $(".addMore").click(function() {
            if ($('body').find('.fieldGroup').length < maxGroup) {
              var fieldHTML = '<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
              $('body').find('.fieldGroup:last').after(fieldHTML);
            } else {
              alert('Maximum ' + maxGroup + ' groups are allowed.');
            }
          });

          //remove fields group
          $("body").on("click", ".remove", function() {
            $(this).parents(".fieldGroup").remove();
          });

          //select2
          $(".selUser").select2();

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<div class="form-group fieldGroup">
  <select class='selUser' style='width: 200px;'>
    <option value='0'>-- Select User --</option>
    <option value='1'>Yogesh singh</option>
    <option value='2'>Sonarika Bhadoria</option>
    <option value='3'>Anil Singh</option>
    <option value='4'>Vishal Sahu</option>
    <option value='5'>Mayank Patidar</option>
    <option value='6'>Vijay Mourya</option>
    <option value='7'>Rakesh sahu</option>
  </select>
  <a href="javascript:void(0)" class="btn btn-primary addMore w-100">+ Add</a>

</div>

<div class="form-group fieldGroupCopy" style="display: none;">
  <select class='selUser' style='width: 200px;'>
    <option value='0'>-- Select User --</option>
    <option value='1'>Yogesh singh</option>
    <option value='2'>Sonarika Bhadoria</option>
    <option value='3'>Anil Singh</option>
    <option value='4'>Vishal Sahu</option>
    <option value='5'>Mayank Patidar</option>
    <option value='6'>Vijay Mourya</option>
    <option value='7'>Rakesh sahu</option>
  </select>
  <a href="javascript:void(0)" class="btn btn-danger remove w-100">- Remove</a>
</div>

对于Fiddle，请单击此处：https://jsfiddle.net/Laucy3qe/1/

Answer 1

由于您的隐藏模板副本已经具有 class selUser，它在页面加载时也被初始化为 Select2。但是 Select2 复制 <select> 以添加它提供的功能和样式，所以您看到的不是您开始使用的普通 HTML select。因此，将已经初始化为 Select2 的原始 pre-select2 HTML 复制到新位置并不能按预期工作就不足为奇了。

保持简单：

从您的隐藏副本中删除 selUser class，因此它不会在页面加载时初始化为 Select2；
更新并插入后将副本初始化为 Select2；

完成。如果你需要它有selUser class，只需同时添加它：

$('body').find('.fieldGroup:last').find("select").addClass('selUser').select2();

这是一个（简化的）工作片段：

// Initialise selects which exist on page load
$(".selUser").select2();

//add more fields group
$(".addMore").click(function() {
    var fieldHTML = '<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
    $('body').find('.fieldGroup:last').after(fieldHTML);
    $('body').find('.fieldGroup:last').find("select").select2();
});

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<div class="fieldGroup">
  <select class='selUser'>
    <option value='0'>-- Select User --</option>
    <option value='1'>Yogesh singh</option>
    <option value='2'>Sonarika Bhadoria</option>
    <option value='3'>Anil Singh</option>
    <option value='4'>Vishal Sahu</option>
    <option value='5'>Mayank Patidar</option>
    <option value='6'>Vijay Mourya</option>
    <option value='7'>Rakesh sahu</option>
  </select>
  <a href="javascript:void(0)" class="addMore">+ Add</a>
</div>

<div class="fieldGroupCopy" style="display: none;">
  <select class=''>
    <option value='0'>-- Select User --</option>
    <option value='1'>Yogesh singh</option>
    <option value='2'>Sonarika Bhadoria</option>
    <option value='3'>Anil Singh</option>
    <option value='4'>Vishal Sahu</option>
    <option value='5'>Mayank Patidar</option>
    <option value='6'>Vijay Mourya</option>
    <option value='7'>Rakesh sahu</option>
  </select>
  <a href="javascript:void(0)" class="remove">- Remove</a>
</div>

如何使用类名动态添加select2？

How to add select2 dynamically with classname?

javascript

html

jquery-select2