Javascript添加了多个引导选择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追加时，multiple select的行为是这样的 i、 e.引导属性不适用于它

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

请帮我解决这个问题。

---

谢谢。

您需要初始化动态添加的

select2

，您只需使用

$（'.select2 multiple:last'）。select2（）

这将搜索最后一个选择框并初始化它

演示代码：

$（“.select2 multiple”）.select2（）；
$（“#添加更多”）。单击（函数（）{
$（“#添加更多”）。之前(
`
国家/地区（您可以添加更多国家/地区）
新加坡
中国
加利福尼亚
`)
//初始化最后添加的selct2
$（'.select2 multiple:last'）。select2（）；
})；

国家/地区（您可以添加更多国家/地区）
新加坡
中国
加利福尼亚
添加更多

工作代码

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

window.onload=函数（）{
//这里不需要初始化。
//$（'.select2 multiple'）.select2（）；
});
$（“#添加更多”）。单击（函数（）{
$（“#添加更多”）。之前(
`
国家/地区（您可以添加更多国家/地区）
新加坡
中国
加利福尼亚
`);
//$（'.select2 multiple:last'）。select2（）；
//改为在这里初始化
$（'.select2 multiple'）.select2（）；
});

Hi@Swati，我尝试了你的代码，但它不起作用。请帮助我解决此问题。我已将我的代码放在上面的编辑部分。谢谢你。谢谢@Swati帮助我。干杯。

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