Question

我希望用户输入他们从下拉列表中选出的所有主题，同时还输入他们从下拉列表中选择的成绩。我为每个输入使用一个表单，但是我意识到如果我复制粘贴所有表单，这是不好的代码。而且，如果我对下拉列表进行了任何更改，则必须对其进行6次修改。我想做一个For循环，但它是HTML。有什么办法解决这个问题？

想做一个For循环，但是想要它的HTML，所以我不知道语法是什么，或者有没有办法在HTML中循环。还是我应该将此代码移至Javascript？

`

<form class="form">
     <select name="Subjects">
         <option disabled selected value>Subject</option>
         <option value="English">English</option>
         <option value="Maths/Science">Elementary Maths</option>
         <option value="Maths/Science">Additional Maths</option>
         <option value="Maths/Science">Physics</option>
         <option value="Maths/Science">Chemistry</option>
         <option value="Humans">Literature</option>
         <option value="Humans">Combined Humans (SS+History)</option>
         <option value="Humans">Mother Tongue</option>
     </select>
     <select name="Grade" id="Grades">
          <option disabled selected value>Grade</option>
          <option value="1">A1</option>
          <option value="2">A2</option>
          <option value="3">B3</option>
          <option value="4">B4</option>
          <option value="5">C5</option>
          <option value="6">C6</option>
          <option value="7">C7</option>
          <option value="8">E8</option>
          <option value="9">F9</option>
     </select>
     <br>

`

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

Answer 1

我们可以为主题和成绩创建两个数组，并对其进行迭代，然后将每个主题/成绩添加到相应的选择标记中。

spring.ldap.embedded.credential.username= uid=admin
spring.ldap.embedded.credential.password= password

注意：就像为成绩选择标签一样，将id 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)添加到主题的选择标签中。希望这会有所帮助：）

Answer 2

这是使用cloneNode()的简单方法：

为您的输入提供ID
在JavaScript中克隆两个输入
在将其添加到表单之前，请通过
创建换行元素
追加换行符和克隆的输入

NB：如果要复制整个表单而不是输入，请使用相同的方法，即克隆form元素并将其附加到boday或容器div。

  for(i=1; i<6; i++) {
        var subject=document.getElementById("subject");
        var newSubject = subject.cloneNode(true);
        newSubject.id='subject'+i;

        var grade=document.getElementById("grade");
        var newGrade = grade.cloneNode(true);
        newGrade.id='garde'+i;

        var linebreak = document.createElement("br");

        document.getElementById("myform").appendChild(linebreak);        
        document.getElementById("myform").appendChild(newSubject);        
        document.getElementById("myform").appendChild(newGrade);        
    }

<form class="form" id="myform">
     <select id="subject" name="Subjects">
         <option disabled selected value>Subject</option>
         <option value="English">English</option>
         <option value="Maths/Science">Elementary Maths</option>
         <option value="Maths/Science">Additional Maths</option>
         <option value="Maths/Science">Physics</option>
         <option value="Maths/Science">Chemistry</option>
         <option value="Humans">Literature</option>
         <option value="Humans">Combined Humans (SS+History)</option>
         <option value="Humans">Mother Tongue</option>
     </select>
     <select  name="Grade" id="grade">
          <option disabled selected value>Grade</option>
          <option value="1">A1</option>
          <option value="2">A2</option>
          <option value="3">B3</option>
          <option value="4">B4</option>
          <option value="5">C5</option>
          <option value="6">C6</option>
          <option value="7">C7</option>
          <option value="8">E8</option>
          <option value="9">F9</option>
     </select>
</form>

Answer 3

问题的答案是否。您无法在HTML中循环播放。 HTML是一种描述性语言，它描述了页面的元素。

为了使其具有编程功能，HTML定义了<script>标签。浏览器支持它，并且能够解释和执行其中包含的代码。由于历史原因，该代码是用 javascript 语言编写的。

根据您的情况，您需要以编程方式更改页面的内容。为此，您无需更改HTML，而是在页面加载完成后操作 DOM ，即浏览器中页面的内部表示形式。浏览器中的javascript支持已经标准化了一些访问DOM并操纵（插入，删除，更改）DOM内容的方法。

您首先必须在页面<script defer>内创建一个<head>标签。 defer属性指定您希望代码在加载整个页面并构建DOM之后运行。

<script defer>
</script>

然后，您需要（1）在页面中找到<form>（2）将其复制五次（3）提供所有ID（包括原始ID）的唯一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)
}

如何循环选择多个表单以生成多个表单？

3 个答案: