我有一个奇怪的问题,克隆表单字段组包括两个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);
});
});
});