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

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来初始化新添加的选择。当我们动态添加时bootstrap-select，我们需要在创建它们后初始化它们。

Answer 2

当一切工作正常并且只是动态添加选择输入时，未按预期呈现&nbsp;function addColorOption() {&nbsp; &nbsp; var color = `&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select class="selectpicker" data-live-search="true" name="color_id" style="width:100%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @foreach($colors as $color)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="{{ $color->id }}">{{ $color->name }}</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @endforeach&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; `;&nbsp; &nbsp; $('#products-color').append(color);&nbsp; &nbsp; $('.selectpicker').selectpicker();&nbsp; //just adding it here will do}``

Answer 3

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