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

Question

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

我的表格看起来像这样。

1. 表格 1
   • 顾客姓名
   • 电话号码
   • 地址
2. 表格 2
   • 顾客姓名
   • 已结婚？
3. 表格 3
   • 顾客姓名
   • 社会安全号码
   • 地址

我的代码看起来像这样。

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

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

标签： javascripthtmldjango

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>