Javascript添加了多个Bootstrap Select div不起作用答案

【问题标题】：Javascript added multiple Bootstrap Select div not workingJavascript添加了多个Bootstrap Select div不起作用
【发布时间】：2020-12-26 20:56:14
【问题描述】：

我正在使用 Bootstrap 来设计我的页面。我正在关注此页面http://skote-light.node.themesbrand.com/form-advanced 创建一个多选。

<script src="~/assets/js/pages/form-advanced.init.js"></script>

<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>

<div id="add-more">Add More<div>

这个的输出是

要求是我需要一个添加更多按钮，以添加更多多选。所以我做的是

$("#add-more").click(function () {
    $("#add-more").before(
`
<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>
`

问题是，当我尝试使用 JavaScript 追加时，多选会以这种方式运行即引导属性不适用于它。

很可能在使用 JavaScript 追加时，无法使用 JavaScript 脚本。

请帮我解决这个问题。谢谢。

【问题讨论】：

标签： javascript jquery css bootstrap-4 html-select

【解决方案1】：

您需要初始化select2，它是动态添加的，您可以简单地使用$('.select2-multiple:last').select2()，这将搜索最后一个选择框并对其进行初始化。

演示代码：

$(".select2-multiple").select2();
$("#add-more").click(function() {
  $("#add-more").before(
    `
<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>
`)
  //initialize selct2 which is added last
  $('.select2-multiple:last').select2();
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<div class="row mt-3">
  <div class="col-lg-12">
    <div class="form-group">
      <label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
      <select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
        <option value="SG">Singapore</option>
        <option value="CH">China</option>
        <option value="CA">California</option>
      </select>
    </div>
  </div>

  <div id="add-more">Add More
    <div>

【讨论】：

嗨@Swati，我试过你的代码，但它不工作。请帮我解决这个问题。我已将我的代码放在上面的编辑部分。谢谢
我想通了。谢谢@Swati 帮助我。干杯。

【解决方案2】：

工作代码

window.onload = function () {
// no need to initialize here.
//$('.select2-multiple').select2();
});


$("#add-more").click(function () {
    $("#add-more").before(
`
<div class="row mt-3">
<div class="col-lg-12">
<div class="form-group">
<label for="basicpill-firstname-input">Countries/Regions (You may add more countries/regions)</label>
<select class="select2 form-control select2-multiple" multiple="multiple" data-placeholder="Choose ...">
<option value="SG">Singapore</option>
<option value="CH">China</option>
<option value="CA">California</option>
</select>
</div>
</div>
`);

//$('.select2-multiple:last').select2();

//initialize here instead
$('.select2-multiple').select2();
});

【讨论】：