formValidation プラグインを使用して、動的フィールドを追加しています。
現在、[追加] をクリックすると、ブートストラップ選択が更新されますが、2 つの選択ドロップダウンが追加され続けます。
誰かが私を正しい方向に向けることができれば、役に立ちます!
JS
// Add work experience handler
.on('click', '.addWork', function() {
workindex++;
var $template = $('#userWork'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.appendTo($("#workAppendContainer"));
// Update the name attributes
$clone
.find('[name="year"]').attr('name', 'userWorkDuration[]').end()
.find('[name="worklocation"]').attr('name', 'userWorkLocation[]').end()
.find('[name="workdescription"]').attr('name', 'userWorkDescription[]').end()
.find('[name="workpositionname"]').attr('name', 'userWorkName[]').end();
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
$('#rootwizard')
.formValidation('addField', 'userWorkDuration[]')
.formValidation('addField', 'userWorkLocation[]')
.formValidation('addField', 'userWorkDescription[]')
.formValidation('addField', 'userWorkName[]');
$('.durationSelect').selectpicker('refresh');
})
これがクローンに使用しているテンプレートとコンテナです
<div class="form-group hide" id="userWork">
<div class="row" style="margin-top:15px;">
<div class="col-md-4">
<div class="col-md-6" style="padding-left: 0px;">
<label>Algus</label>
<div class="form-group form-group-custom">
<select class="durationSelect selectpicker" data-live-search="true" name="year">
<optgroup class="userWorkYear">
<option disabled selected value="">
Vali kestvus
</option>
<option value="-3">Vähem kui kolm kuud</option>
<option value="3 kuud">3 kuud</option>
<option value="6 kuud">6 kuud</option>
<option value="9 kuud">9 kuud</option>
<option value="1 aasta">1 aasta</option>
<option value="2 aastat">2 aastat</option>
<option value="3 aastat">3 aastat</option>
<option value="3+">Rohkem kui 3 aastat</option>
</optgroup>
</select>
</div>
</div>
</div>
<div id="workAppendContainer">
</div>