动态添加 select2 下拉菜单不起作用

Question

我有一个小要求，我需要制作一个表单转发器，其中包含一个字段作为选择下拉列表。我已经创建了一个 jsfiddle 来重现这个问题。

https://jsfiddle.net/varun9522/gwb3rLp9/9/

[Js Fiddle 链接与示例代码和问题重现][1]

点击添加更多按钮时的问题，模板被添加，但从下拉列表中我无法选择或搜索选项。 以下是我的 HTML：

<div id="form-repeater">
<div class="row">
  <select class="js-select2">
  </select>
  <button type="button" class="btn btn-primary" 
          id="add-more">Add More</button>
  </div>  
</div>




<div id="template" style='display: none;'>
  <div class="parent-div">
    <div class="row">
      <select class="js-select2">
      </select>

      <button type="button" class="btn btn-primary" 
              id="remove">Remove</button>
    </div>
  </div>
</div>

以下是我的javascript：

$(".js-select2").select2({
  ajax: {
    url: "https://run.mocky.io/v3/651b234e-e668-4143-8c41-2e6a5bafcd27",
    delay: 250,
    processResults: processData
  },
  data: processData([{ "Id": "4", "Code": "JKL", "Description": "Juliet Kilo Laugh" }]).results,
  minimumInputLength: 1,
  escapeMarkup: function (m) { return m; } ,
  templateSelection: myCustomTemplate
});

function processData(data) {
  var mapdata = $.map(data, function (obj) {      
    obj.id = obj.Id;
    obj.text = '[' + obj.Code + '] ' + obj.Description;
    return obj;
  });
  return { results: mapdata }; 
}

function myCustomTemplate(item) {
     return '<strong>' + item.Code + '</strong> - ' + item.Description;
}

$("#add-more").click(function() {
    var content = $('#template').html();
  $('#form-repeater').append(content);
})

$(".remove").click(function(obj) {
    $(obj).closest('.parent-div').remove();
})

Answer 1

$(document).on('click', '.CourseAddButton', function() {
        var configParamsObj = {
                placeholder: 'Select an option...', // Place holder text to place in the select
                minimumResultsForSearch: 3 // Overrides default of 15 set above
                };

        var $thisTable = $(this).closest('table').find('tbody');
        var copyRow = $thisTable.find('tr:first');
        var hasSelect2 = $thisTable.find('.courseNameID').length;
        if (hasSelect2 !== 0) $thisTable.find(".courseNameID").select2('destroy');
        $thisTable.prepend(`<tr>${copyRow.html()}</tr>`);
        if (hasSelect2 !== 0) {
            $thisTable.find('.courseNameID').select2().next().next().remove();
            $thisTable.find('select.courseNameID').select2(configParamsObj);
        }
    });

Answer 2

当你执行$(".js-select2").select2({...});时，这个选择器会初始化链接到这个选择器的所有select2，所以你也初始化你的模板。

所以你必须复制模板并在初始化后创建新的select2。

所以为了避免这个问题，我在选择器中添加了first()

我已经删除了按钮remove的id并替换为class。

另一个错误，当你动态创建按钮时，如果你想捕获事件，你必须使用委托，所以我修改了事件点击以销毁select2项。

$("select.js-select2").first().select2({
  ajax: {
    url: "https://run.mocky.io/v3/651b234e-e668-4143-8c41-2e6a5bafcd27",
    delay: 250,
    processResults: processData
  },
  data: processData([{
    "Id": "4",
    "Code": "JKL",
    "Description": "Juliet Kilo Laugh"
  }]).results,
  minimumInputLength: 1,
  escapeMarkup: function(m) {
    return m;
  },
  templateSelection: myCustomTemplate
});

function processData(data) {
  var mapdata = $.map(data, function(obj) {
    obj.id = obj.Id;
    obj.text = '[' + obj.Code + '] ' + obj.Description;
    return obj;
  });
  return {
    results: mapdata
  };
}

function myCustomTemplate(item) {
  return '<strong>' + item.Code + '</strong> - ' + item.Description;
}

$("#add-more").click(function() {
  var content = $('#template').html();
  $('#form-repeater').append(content);
  //console.log($("#form-repeater select.js-select2").length)
  $("#form-repeater select.js-select2").last().select2({
    ajax: {
      url: "https://run.mocky.io/v3/651b234e-e668-4143-8c41-2e6a5bafcd27",
      delay: 250,
      processResults: processData
    },
    data: processData([{
      "Id": "4",
      "Code": "JKL",
      "Description": "Juliet Kilo Laugh"
    }]).results,
    minimumInputLength: 1,
    escapeMarkup: function(m) {
      return m;
    },
    templateSelection: myCustomTemplate
  });
})

$("body").on("click", "button.remove", function() {
  $(this).closest('div.parent-div').remove();
})

.js-select2 {
  width: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/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://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


<div id="form-repeater">
  <div class="row">
    <select class="js-select2">
    </select>
    <button type="button" class="btn btn-primary" id="add-more">Add More</button>
  </div>
</div>




<div id="template" style='display: none;'>
  <div class="parent-div">
    <div class="row">
      <select class="js-select2">
      </select>

      <button type="button" class="btn btn-primary remove">Remove</button>
    </div>
  </div>
</div>