使用Javascript使用"选择选项"对动态窗体集重新编号后，将删除"选定选项"

Question

我为我的django项目创建了一个动态表单集，用于动态添加和删除表单。为了在重新编号后保留字段的值，我在重新编号前保存字段的值并且在重新编号表单后分配相同的值。它在文本输入中工作得很好，但由于我在javascript方面的经验和知识有限，我无法保留所选选项的价值。

我们非常欢迎任何帮助和建议。

谢谢。

<style type="text/css">
fieldset {
border: none;
}
</style>
<form id="demo" action="{% url 'my_formset' %}" method="POST">
{% csrf_token %}
{{p_form}}
<br>
<hr>
<!-- Keep Track of the Total Form Here -->
<input id="total_forms" name="TOTAL_FORM_COUNT" value="0" type="hidden">
<!-- This is the Form that will be duplicated. We will hide this form. -->
<fieldset disabled class="empty-form" style="display: none">
<fieldset class="fieldset" id="fs_0">
<label>Name</label>
<input type="text" id="id-f-0-name" name="id-f-0-name" value="">
<label>Select:</label>
<select id="id-f-0-item" name="id-f-0-item" placeholder="">
<option disabled selected value={{None}}> Select Item </option>

<option value='1'>Butter</option>
<option value='2'>Milk</option>
<option value='3'>Tofu</option>
<option value='4'>Soyabeans</option>
</select>
<button type="button" id="d-0" class="delete_form" onclick="del_form(this.id);">
DELETE
</button>
</fieldset>

</fieldset>

<!-- This is where we will insert the form -->
<fieldset class="forms">
</fieldset>
<!-- This is the ADD Button to add New Forms -->
<fieldset class="controls">
<button type="button" onclick="addForm();">
Add new form
</button>
</fieldset>
<br>
<br>
<button type="submit">Save</button>
</form>
<br>
<br>

<script type="text/javascript">
var emptyForm = document.querySelector('.empty-form').firstElementChild; // Form to Clone
var formsList = document.querySelector('.forms'); // Div to Add New Form to
var totalForms = document.querySelector("#total_forms"); // To Keep Count of Total Form
var fieldset = document.getElementsByClassName("fieldset"); // To get all individual input form under the formset
var formCount = fieldset.length - 1; // Count for Python starts from 0 and we already have one empty fieldset
var min_form = "{{min_form}}"

const del_btnRegex = /d-(d){1,}/g; 
const formRegex = /f-(d){1,}-/g; 
function renumber() {
var fieldsets = document.getElementsByClassName("fieldset");
for (i = 0; i < fieldsets.length; i++) {
console.log(i);
fieldsets[i].id = `fs_${i}`;
f = fieldsets[i].getElementsByTagName('input');
for (c = 0; c < f.length; c++){
x = f[c];
const v = x.value;
x.id = x.id.replace(formRegex, `f-${i}-`);
x.name = x.name.replace(formRegex, `f-${i}-`);
x.setAttribute('value',v);
};

//I am having problems here
s = fieldsets[i].getElementsByTagName('select');
for (c = 0; c < s.length; c++){
x = s[c];
const vi = x.selectedIndex;
x.id = x.id.replace(formRegex, `f-${i}-`);
x.name = x.name.replace(formRegex, `f-${i}-`);
x.selectedIndex = vi;
};     
}
};

function update_del_btn_id() {
let count = 0;
for (let f of fieldset) {
f.innerHTML = f.innerHTML.replace(del_btnRegex, `d-${count++}`)
}
};

function addForm(){
//Copy Empty Form
var newForm = emptyForm.cloneNode(true);
//Insert the Copied Form
formsList.insertAdjacentElement('beforeend', newForm);
formCount++; //increases the formCount variable
//Increase the Total Form Count to loop in python
totalForms.setAttribute('value', `${formCount}`);
renumber();
update_del_btn_id();
show_hide_del_button();
}
function del_form(id){
//var id = event.srcElement.id.slice(2,);
var id = id.slice(2,);
console.log(id);
document.getElementById(`fs_${id}`).remove();
formCount--;
totalForms.setAttribute('value', `${formCount}`);

renumber();
update_del_btn_id();
show_hide_del_button();
}
function show_hide_del_button() {
var delBtn = document.getElementsByClassName('delete_form');
if (delBtn.length-1 <= min_form) {for (var i = delBtn.length-1; i >= 0; i--){delBtn[i].style.display='none'}}
else{for (var i = delBtn.length-1; i >= 0; i--) {delBtn[i].style.display='inline-block';}};   
}
</script>

Answer 1

像这样更新Delete按钮的ID，以避免写入innerHTML。写入innerHTML会导致表单和选择选项重新加载。此外，不需要捕获文本字段或选择选项的值并重新分配值。它将保持原样。

function update_del_btn_id() {
var del_btns = document.getElementsByClassName("delete_form");
for (i = 0; i < del_btns.length; i++) {
del_btns[i].id = `d-${i}`;
}; };

function renumber() {
var fieldsets = document.getElementsByClassName("fieldset");
for (i = 0; i < fieldsets.length; i++) {
console.log(i);
fieldsets[i].id = `fs_${i}`;
f = fieldsets[i].getElementsByTagName('input');
for (c = 0; c < f.length; c++){
x = f[c];
x.id = x.id.replace(formRegex, `f-${i}-`);
x.name = x.name.replace(formRegex, `f-${i}-`);
};

s = fieldsets[i].getElementsByTagName('select');
for (c = 0; c < s.length; c++){
x = s[c];
x.id = x.id.replace(formRegex, `f-${i}-`);
x.name = x.name.replace(formRegex, `f-${i}-`);
};     
}};