jquery - 克隆组的 select2 无法正常工作

Question

我有一个奇怪的问题，克隆表单字段组包括两个select字段，Station和Next Station. 当我克隆该组时，它会不断将选择元素添加到第一个克隆中。这只发生在组中两个中的第一个选择字段中。

克隆表单元素

安慰

Javascript

$(document).ready(function () {

    //ele select2
    let selectEle = $('.select2');

    // select2 init
    selectEle.select2({
        placeholder: 'Select a station',
        allowClear : true
    });

    let clonerGroupParent = $('.cloner-group-parent');
    let btnAdd            = $('.cloner-btn-add');
    let btnDel            = $('.cloner-btn-del');

    //add button click
    btnAdd.on('click', function (event) {

        event.preventDefault();
        
        // destroy select2
        selectEle.select2('destroy');

        // clone the group
        clonerGroupParent.children('.cloner-group').last().clone(true, true).appendTo('.cloner-group-parent');

        // init select2
        clonerGroupParent.children('.cloner-group').find('.select2').select2({
            placeholder: 'Select a station',
            allowClear : true
        });
    });

});

生成的 HTML 标记

我正在研究 Laravel 刀片。还删除了 select2 生成的标记 (span .. )

<div class="card-body">
    <div class="cloner-container" id="clonable-block" data-toggle="cloner">
        <div class="cloner-group-parent">
            <div class="form-row cloner-group justify-content-between align-items-end" data-ss="1">
                <!-- cloner fields -->
                <div class="form-group col-md-6 col-xl-3 col-sm-12">
                    <label for="station_id_1" class="cloner-label">Station</label>
                    <select name="station_id[]" class="select2 station-select cloner-field form-control select2-hidden-accessible" required="" data-select2-id="1" tabindex="-1" aria-hidden="true">
                        <option data-select2-id="3"></option>
                        <option value="1">Delia Parkway</option>
                        <option value="2">O'Connell Rue</option>
                        <option value="3">Jarrell Tunnel</option>
                    </select>
                </div>

                <div class="form-group col-md-6 col-xl-3 col-sm-12">
                    <label for="next_station_id_1" class="cloner-label">Next Station</label>
                    <select name="next_station_id[]" class="select2 cloner-field form-control select2-hidden-accessible" required="" data-select2-id="4" tabindex="-1" aria-hidden="true">
                        <option data-select2-id="6"></option>
                        <option value="1">Delia Parkway</option>
                        <option value="2">O'Connell Rue</option>
                        <option value="3">Jarrell Tunnel</option>
                    </select>
                </div>

                <div class="form-group col-md-6 col-xl-2 col-sm-12">
                    <label for="distance1" class="cloner-label">Distance
                        (km)</label>
                    <input type="text" name="distance[]" data-inputmask-regex="(\d*).?([0-9][0-9])" class="cloner-field distance form-control " placeholder="Distance" value="" autocomplete="off" required="" inputmode="text">
                    <span class="invalid-feedback d-block" role="alert"><strong id="distanceError"></strong></span>
                </div>

                <div class="form-group col-md-6 col-xl-2 col-sm-12">
                    <label for="duration1" class="cloner-label">Duration
                        (min)</label>
                    <input type="text" name="duration[]" data-inputmask-regex="([0-5]?[0-9]):([0-5]?[0-9])" class="cloner-field duration form-control " placeholder="Duration" value="" autocomplete="off" required="" inputmode="text">
                    <span class="invalid-feedback d-block" role="alert"><strong id="durationError"></strong></span>
                </div>
                <!-- end cloner fields -->
                <div class="form-group col-md-6 col-xl-1 col-sm-12">
                    <button type="button" class="btn btn-sm btn-outline-light text-danger cloner-btn-del mb-xl-1">
                        <i class="fas fa-minus-circle"></i></button>
                </div>
            </div>
            <!-- ./cloner-group -->
        </div>
        <!-- ./cloner-group-parent -->
        <button class="cloner-btn-add btn btn-sm btn-outline-dark" type="button">Add</button>
    </div>
    <!-- ./cloner-container -->
</div>

问题：

如何解决如上所述发生的重复字段问题？

更新代码

我尝试了另一个代码.each()（感谢@jPO的输入），但这也不起作用。

$(document).ready(function () {

    // vars
    let clonerGroupParent = $('.cloner-group-parent');
    let btnAdd            = $('.cloner-btn-add');
    let btnDel            = $('.cloner-btn-del');

    let selOptions = {
        placeholder: 'Select a station',
        allowClear : true
    };

    // day select2
    let selectEle = $('.select2');

    // select2 for role
    selectEle.select2(selOptions);


    //add button click
    btnAdd.on('click', function (event) {

        // prevent jump
        event.preventDefault();

        // destroy each select2
        selectEle.each(function () {
            $(this).select2('destroy');
        })

        // clone group
        clonerGroupParent.children('.cloner-group').last().clone(true, true).appendTo('.cloner-group-parent');

        // init each select2
        clonerGroupParent.children('.cloner-group').find('.select2').each(function () {
            $(this).select2(selOptions);
        });
    });

});

标签： jquerylaraveljquery-select2jquery-clone