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

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

用select生成的addColorOption()元素应分别具有唯一的name值，与原始元素不同。您可以根据每次的现有选择数生成一个数字，并将其附加到新元素的名称上。

Answer 2

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

由于我们正在动态添加bootstrap-select，因此我们需要在创建它们后对其进行初始化。您可以找到文档bootstrap-select here

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