添加新框时如何控制选择框

Question

我正在使用bootstrap select，我有一组输入，用户可以根据自己的意愿添加它，但只有第一个选择框可以与插件一起运行，但其他输入不能

HTML代码：

<div id="products-color">
<div class="form-group">
<select class="selectpicker" data-live-search="true" name="color_id" style="width:100%">
@foreach($colors as $color)
<option value="{{ $color->id }}">{{ $color->name }}</option>
@endforeach 
</select>
</div>
</div>
<button type="button" class="btn btn-tiffany" onclick="addColorOption()">Add New </button>

js代码：

function addColorOption() {
var color = `
<div class="form-group">
<select class="selectpicker" data-live-search="true" name="color_id" style="width:100%">
@foreach($colors as $color)
<option value="{{ $color->id }}">{{ $color->name }}</option>
@endforeach 
</select>
</div>
`;
$('#products-color').append(color);
}

引导程序选择插件：

$('.selectpicker').selectpicker();

这意味着只有第一个选择框与插件一起运行，但当我通过add new按钮添加新的选择框时，插件不工作

Answer 1

您需要将$('.selectpicker').selectpicker();作为addColorOptions方法的最后一行来初始化新添加的select。

当我们动态添加bootstrap-select时，我们需要在创建它们之后对它们进行初始化。你可以在这里找到文档引导选择

Answer 2

使用addColorOption()生成的select元素每个都应该有一个唯一的name值，而不是与原始元素相同。您可以根据每次现有选择的数量生成一个数字，并将其附加到新元素的名称中。

Answer 3

当一切正常并且只是动态添加时，选择未按预期呈现的输入

function addColorOption() {
var color = `
<div class="form-group">
<select class="selectpicker" data-live-search="true" name="color_id" style="width:100%">
@foreach($colors as $color)
<option value="{{ $color->id }}">{{ $color->name }}</option>
@endforeach 
</select>
</div>
`;
$('#products-color').append(color);
$('.selectpicker').selectpicker();  //just adding it here will do
}
``