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

Question

I'm working with bootstrap-select and I have the group of inputs that user add it as he wants, but just the first select box runs ok with the plugin but others inputs don't

HTML code:

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

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

bootstrap select plugin:

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

That's means just the first select box runs with the plugin but when I add a new select box by add new button the plugin does not work

Answer 1

You need to put $('.selectpicker').selectpicker(); as last line of addColorOptions method to initialize the newly added select.

As we are adding a bootstrap-select dynamically, we need to initialize them after creating them. You can find the documentation bootstrap-select here

Answer 2

when everything is working fine and just dynamically added select inputs not rendering as expected

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

Answer 3

The select elements generated with addColorOption() should each have a unique name value, not the same as your original element. You could generate a number based on the number of existing selects each time and append it to the name of the new element.