Как контролировать окно выбора при добавлении нового?

Question

Я работаю с bootstrap -выберите , и у меня есть группа входов, которые пользователь добавляет, как ему хочется, но только первый блок выбора работает нормально с плагином, но другие входы не делают t

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

bootstrap выберите плагин:

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

Это означает, что только первый блок выбора работает с плагином, но когда я добавляю новый блок выбора кнопкой add new, плагин не работает

Answer 1

Вам нужно поставить $('.selectpicker').selectpicker(); в качестве последней строки метода addColorOptions для инициализации вновь добавленного выбора.

Поскольку мы добавляем bootstrap-select динамически, нам нужно инициализировать их после их создания. Вы можете найти документацию bootstrap - выберите здесь

Answer 2

, когда все работает нормально и просто динамически добавляются выбранные входы, которые не отображаются должным образом

 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

Каждый элемент select, созданный с помощью addColorOption(), должен иметь уникальное значение name, отличное от исходного элемента. Вы можете сгенерировать число на основе количества существующих выборок каждый раз и добавить его к имени нового элемента.