Javascript 如何使用多项选择循环表单，以生成多个表单？

我想让用户输入他们从下拉列表中选择的所有科目，同时也输入他们从下拉列表中选择的成绩。我对每个输入都使用一个表单，但我意识到如果我复制粘贴所有表单，这是一个糟糕的代码。如果我对下拉列表做了任何更改，我必须修改它6次。我想做一个For循环，但它是HTML。有办法解决这个问题吗

我想做一个For循环，但是它是HTML，所以我不知道它的语法是什么，或者有没有办法在HTML中循环。还是我应该把这些代码转移到Javascript上

`

主题
英语
初等数学
附加数学
物理
化学
文学类
联合人类（SS+历史）
母语
等级
A1
A2
地下三层
B4
碳五
C6
C7
E8
F9

`

---

它将显示一种形式。我需要有6个完全相同的布局形式。我不想复制粘贴它。我宁愿使用某种循环。

我们可以为主题和等级创建两个数组，并对它们进行迭代，然后将每个主题/等级添加到相应的select标记中

const subjects = [
  { name: "English", value: "English" },
  { name: "Elementary Maths", value: "Maths/Science" },
  { name: "Additional Maths", value: "Maths/Science" },
  { name: "Physics", value: "Maths/Science" },
  { name: "Chemistry", value: "Maths/Science" },
  { name: "Literature", value: "Humans" },
  { name: "Combined Humans (SS+History)", value: "Humans" },
  { name: "Mother Tongue", value: "Humans" }
];

const grades = [
  { name: "A1", value: "1" }, { name: "A2", value: "2" },
  { name: "B3", value: "3" }, { name: "B4", value: "4" },
  { name: "C5", value: "5" }, { name: "C6", value: "6" },
  { name: "C7", value: "7" }, { name: "E8", value: "8" },
  { name: "F9", value: "9" }
];

const createOption = option => {
    let optionEl = document.createElement('option');
    optionEl.value = option.value;
    optionEl.innerText = option.name;
    return optionEl;
}

function addOptions(subjectTagId, options) {
    const select = document.getElementById(subjectTagId);
    options.forEach(option => select.appendChild(createOption(option)));
}

addOptions('subjects', subjects);
addOptions('grades', grades)

---

注意：向科目选择标记添加id

“科目”

，就像为成绩选择标记添加id一样。希望这有帮助：）

这里有一个使用

cloneNode（）的简单方法。

：

为您的输入提供ID

在JavaScript中，克隆两个输入

在将它们附加到表单之前，请通过

创建换行符元素

追加换行符和克隆的输入

N.B:如果要复制整个表单而不是输入，请使用相同的方法克隆表单元素并将其附加到boday或container div

---

for（i=1；i您的问题答案是否。您不能在HTML中循环。HTML是一种描述性语言，它描述页面的元素

为了使自己具有编程功能，HTML定义了
标记。浏览器支持它，并能够解释和执行它包含的代码。出于历史原因，代码是用javascript语言编写的

在您的情况下，您需要以编程方式更改页面的内容。为此，您不需要更改HTML，而是在页面加载完成后操作DOM，这是页面在浏览器中的内部表示形式。浏览器中的javascript支持使一些访问DOM和操作的方法标准化（插入、删除、更改）DOM内容

您首先必须在页面内创建一个
标记
。
延迟
属性指定您希望在加载完整页面并构建DOM后运行代码

<script defer>
</script>



然后，您需要（1）在页面中找到您的
（2）复制五次（3）提供所有副本（包括原始）唯一ID，以及（4）在原始表单之后、原始表单后面的下一个元素之前将副本插入DOM

let originalForm=document.querySelector("form");   //(1)
let insertionPoint=form.nextSibling;  //(4)
originalForm.id="form-1";  //(3)
for (let i=2;i<=6;i++) {  //(2)
  let copied = originalForm.cloneNode(true); //(2)
  copied.id='form-'+i; //(3)
  originalForm.parentNode.insertBefore(copied, insertionPoint); //(4)
}

let originalForm=document.querySelector（“表单”）；/（1）
让insertionPoint=form.nextSibling；//（4）
originalForm.id=“form-1”/（3）
for（让i=2；iThanks！我能理解为什么需要更改id吗？因为属性id必须是唯一的，所以它的值在元素的主子树中的所有id中必须是唯一的。
let originalForm=document.querySelector("form");   //(1)
let insertionPoint=form.nextSibling;  //(4)
originalForm.id="form-1";  //(3)
for (let i=2;i<=6;i++) {  //(2)
  let copied = originalForm.cloneNode(true); //(2)
  copied.id='form-'+i; //(3)
  originalForm.parentNode.insertBefore(copied, insertionPoint); //(4)
}