Блог

Я довольно новичок в плагине jQuery / Bootstrap-Select, и я ходил по кругу, добавляя несколько полей выбора при нажатии кнопки Добавить:

Я использую Bootstrap v3.3.5, jQuery v2.1.4 и Bootstrap-select v1.11.2.

Ниже приведен мой HTML-код:

 <h2>Vehicle Details</h2>
<div class="row">
    <div class="vehicle_wrapper">
        <div class="col-xs-3 col-sm-3 col-md-3">
            <select name="vehicle_make[]" data-live-search="true" class="form-control" placeholder="Vehicle Make" required>
                <option value="">Vehicle Make</option>
                {foreach item=makes from=$makes_array key=m}
                    <option value="{$makes->make_id}">{$makes->make_name}</option>
                {/foreach}
            </select>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3">
            <select name="vehicle_model[]" data-live-search="true" class="form-control" placeholder="Vehicle Model" disabled>
                <option value="">Vehicle Model</option>
            </select>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3">
            <div class="form-group">
                <input type="text" class="form-control" name="vehicle_vrm[]" value="" placeholder="Vehicle VRM" />
            </div>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3">
            <div class="form-group">
                <input type="text" class="form-control" name="vehicle_vin[]" value="" placeholder="Vehicle VIN" />
            </div>
        </div>
    </div>
    <div id="moreVehicles"></div>
    <div class="col-xs-2 col-sm-2 col-md-2 pull-right"><input class="btn btn-success button exrta" type="button" id="addVehicle" value="Add  " > amp;nbsp; <input class="btn btn-danger button exrta" type="button" id="cancelVehicle" value="Remove -" ></div>
</div>
 

Мой код JS / jQuery выглядит следующим образом:

 $(document).ready(function() {     
    $('select').selectpicker();

    var vehicles = $("select[name='vehicle_make[]']").length;
    var allowed_vehicles = vehicles;
    $("#addVehicle").click(function (event) {
        if( $('.vehicle_wrapper').length > 0 ){
            var html = $('.vehicle_wrapper').html();
            $('#moreVehicles').append('<div class="vehicle' vehicles '">'   html   '</div>');

            if( $("#moreVehicles .vehicle" vehicles " select").length > 0 ){
                $('select').selectpicker('refresh');
            }
        }
        vehicles  ;
        event.preventDefault();
    });

    $("#cancelVehicle").click(function(event){
        if(vehicles > allowed_vehicles){
            vehicles--;
            event.preventDefault();
            $('.vehicle' vehicles '').remove();
        }
    });
});
 

Ниже приведен мой скриншот того, как это выглядит при нажатии кнопки Добавить, и он проверяет, существует ли элемент, а затем обновляет поле выбора. По какой-то странной причине он добавляет еще одну копию поля выбора под ним. Однако, если я удалю строку обновления кода, вы не сможете выбрать параметры в поле выбора.

Когда строка обновления закомментирована, отображается приведенный ниже вывод, но я не могу выбрать этот параметр.

Любая помощь будет высоко оценена. Спасибо, что потратили свое время на изучение этого вопроса.