Учитывая некоторые html, форму с именем inputPrefixListIx
и кнопку с именем addPrefixListIx
<div id="divinputPrefixListIx" name="divinputPrefixListIx">
<form name="inputPrefixListIx" class="inputPrefixListIx">
<div class="row">
<div class="col-12">
<select name="spec" class="mdb-select md-form colorful-select dropdown-primary">
<option value="" disabled selected>spec</option>
<option value="replace" data-secondary-text="">replace</option>
<option value="delete" data-secondary-text="">delete</option>
</select>
<label class="mdb-main-label">spec</label>
</div>
</div>
</div>
<br><br><br>
</form>
<div class="col-12">
<button type="button" name="addPrefixListIx" id="addPrefixListIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
</div>
</div>
Я хотел бы клонировать / продублировать форму, когда пользователь нажимает кнопку addPrefixListIx
использование jQuery Я думаю.
Используемый * (и работает частично) jQuery выглядит так:
<script type="text/javascript" src="/static/js/blueprints.js"></script>
jQuery(($) => {
// PrefixListIx
$('#addPrefixListIx').click(function() {
$('.inputPrefixListIx:first').clone().insertAfter('.inputPrefixListIx:last');
});
if (sessionStorage.getItem('PrefixListIx') !== null) {
$('#divinputPrefixListIx').addClass('d-none');
}
else {
$('#divmanifestPrefixListIx').addClass('d-none');
}
$('#delPrefixListIx').click(function() {
sessionStorage.removeItem('PrefixListIx');
$('#divinputPrefixListIx').toggleClass('d-none');
$('#divmanifestPrefixListIx').toggleClass('d-none');
});
});
Что не работает, так это то, что параметры полей формы выбора не появляются.
Не могли бы вы сообщить, что я делаю неправильно и как это исправить?
РЕДАКТИРОВАТЬ: Я столкнулся с этим Клон не клонирую выбранные значения , что предполагает исправление, доступное здесь https://github.com/spencertipping/jquery.fix.clone, но я не знаю, как его использовать, учитывая приведенный пример, кто-нибудь может посоветовать?