Javascript 添加了多个 Bootstrap Select div 不工作

Question

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

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

这个的输出是

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

$("#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 追加时，多个 select 的行为是这样的即 bootstrap 属性未应用于它。

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

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

Answer 1

您需要初始化动态添加的 select2，您可以简单地使用 $('.select2-multiple:last').select2() 这将搜索最后的 select-box 并初始化它。

演示代码 :

$(".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>

Answer 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();
});

Javascript 添加了多个 Bootstrap Select div 不工作

Javascript added multiple Bootstrap Select div not working

javascript

css

jquery

html-select

bootstrap-4