HTML -从一个表单模板中创建多个表单

Question

我目前有多个表单，它们相似，但变化很小。首先，用户从下拉菜单中选择表单，然后表单如下所示。

我的表格是这样的。

Number

• Address

1. Form 1
   • 客户名
   • 电话

married?

1. Form 2
   • Customer Name
   • Is

Number

• Address

1. Form 3
   • Customer Name
   • Social Security

我的代码看起来像这样。

<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>

有没有办法创建一个包含所有表单元素的“main”表单，然后指定在每个表单中使用哪个元素？我现在使用的方法很好，但是重复的代码太多了，如果我试图对其中一个元素进行更改，可能无法正确地进行缩放(因为我必须更改每个元素，并且很容易出错)

Answer 1

您不需要三种不同的表单，只需将所有字段设置为隐藏的表单即可。然后给每个字段提供一个类匹配，以显示该字段的形式。然后根据所选的值简单地显示匹配字段。

​

select_form = document.querySelector(".select_form");
fields = document.querySelectorAll(".field");

select_form.addEventListener("change", function() {
  fields.forEach(function(el) {
    el.style.display = "none";
  });
  show = document.querySelectorAll("." + this.value);
  show.forEach(function(el) {
    el.style.display = "block";
  });
});

.field {
  display: none;
}

<select class="select_form">
  <option value="" selected="selected"></option>
  <option value="form1">f1</option>
  <option value="form2">f2</option>
  <option value="form3">f3</option>
</select>

<form>
  <div class="field form1 form2">ONLY form1 and 2</div>
  <div class="field form3">ONLY form3</div>
</form>

​