Javascript HTML-使用一个表单模板创建多个表单

我目前有多个类似的表单，但有一些小的变化。首先，用户从下拉菜单中选择表单，然后表单如下所示

我的表格是这样的

<select onchange="changeOptions(this)">
    <option value="" selected="selected"></option>
    <option value="form1">f1</option>
    <option value="form2">f2</option>
    <option value="form3">f3</option>
</select>

<form class="className" name="form1" id="form1" style="display:none">
---form---
<form class="className" name="form2" id="form2" style="display:none">
---form---
<form class="className" name="form3" id="form3" style="display:none">
---form---
<script>
    function changeOptions(selectEl) {
        let selectedValue = selectEl.options[selectEl.selectedIndex].value;
        let subForms = document.getElementsByClassName('className')
        for (let i = 0; i < subForms.length; i += 1) {
            if (selectedValue === subForms[i].name) {
                subForms[i].setAttribute('style', 'display:block')
            } else {
                subForms[i].setAttribute('style', 'display:none')
            }
        }
    }
</script>

表格一

• 客户名称
• 电话号码
• 地址

表格二

• 客户名称
• 她结婚了吗

表格三

• 客户名称
• 社会保险号码
• 地址

我的代码看起来像这样

<select onchange="changeOptions(this)">
    <option value="" selected="selected"></option>
    <option value="form1">f1</option>
    <option value="form2">f2</option>
    <option value="form3">f3</option>
</select>

<form class="className" name="form1" id="form1" style="display:none">
---form---
<form class="className" name="form2" id="form2" style="display:none">
---form---
<form class="className" name="form3" id="form3" style="display:none">
---form---
<script>
    function changeOptions(selectEl) {
        let selectedValue = selectEl.options[selectEl.selectedIndex].value;
        let subForms = document.getElementsByClassName('className')
        for (let i = 0; i < subForms.length; i += 1) {
            if (selectedValue === subForms[i].name) {
                subForms[i].setAttribute('style', 'display:block')
            } else {
                subForms[i].setAttribute('style', 'display:none')
            }
        }
    }
</script>

f1
f2
f3
---形式---
---形式---
---形式---
功能更改选项（选择EL）{
让selectedValue=selectEl.options[selectEl.selectedIndex].value；
let subForms=document.getElementsByCassName（'className'）
for（设i=0；i

---

有没有办法创建一个包含所有表单元素的“主”表单，然后指定在每个表单中使用哪个元素？我现在使用的方法工作得很好，但是重复代码太多，如果我尝试更改其中一个元素，可能无法正确缩放（因为我必须更改其中的每一个元素，而且很容易出错）

您不需要三种不同的表单，只需使用一种表单，将所有字段设置为隐藏即可。然后为每个字段指定一个与该字段的显示形式相匹配的类。然后简单地显示基于所选值的匹配字段

select_form=document.querySelector（“.select_form”）；
字段=document.queryselectoral（“.field”）；
选择_form.addEventListener（“更改”，函数（）{
fields.forEach（函数（el）{
el.style.display=“无”；
});
show=document.querySelectorAll（“.”+this.value）；
show.forEach（函数（el）{
el.style.display=“块”；
});
});
.field{
显示：无；
}

f1
f2
f3
仅表格1和表格2
仅表格3