javascript - 如何在每个 for 循环中使用每个数组值（相同数量）

Question

我有以下名为equipos_seleccionados的数组

["12 - v4", "100 - v500"]

这是前端的样子：

如您所见，我会自动生成与头部输入值一样多的文本框。

目标：我想（在这种情况下）将值12 - v4用于前 2 个元素（选择），将值100 - v500用于接下来的 4 个元素（选择）。

这是我到目前为止的代码：

result["cantidad_seriado"].forEach(function(entry) {

    for (var i = 0; i < entry; i++) {

        div_hr1.append("<select class='form-control' id='selected_equipo_seriado' name='selected_equipo_seriado' required='required' disabled><option selected value=''>" + equipos_seleccionados + "</option></select><br>");

        div_hr2.append(`

      <input class="form-control" id="nro_serie_seriado" name="nro_serie_seriado" type="number" required="required" placeholder="Nro de serie"><br>
        
    `);

    };

    div_hr1.append(`

      <hr class="sidebar-divider" style="border-color:blue;">

    `);

    div_hr2.append(`

      <hr class="sidebar-divider" style="border-color:blue;">

    `);

});**

它应该是这样的：

标签： javascriptphphtmlarrays

Answer 1

您可以通过使用forEach函数索引的重载仅打印与result["cantidad_seriado"]相同位置的equipos_seleccionados中的元素。

你只需要改变.forEach(function(entry))for.forEach(function(entry, index))

var equipos_seleccionados = ["12 - v4", "100 - v500"]
div_hr1 = document.getElementById('div_hr1')
div_hr2 = document.getElementById('div_hr2')

var result = ["2", "3"]

result.forEach(function(entry, index) {

  console.log(entry)
    for (var i = 0; i < entry; i++) {

        div_hr1.innerHTML += "<select class='form-control' id='selected_equipo_seriado' name='selected_equipo_seriado' required='required' disabled><option selected value=''>" + equipos_seleccionados[index] + "</option></select><br>"

        div_hr2.innerHTML += `

      <input class="form-control" id="nro_serie_seriado" name="nro_serie_seriado" type="number" required="required" placeholder="Nro de serie"><br>
        
    `

    }

    div_hr1.innerHTML += `

      <hr class="sidebar-divider" style="border-color:blue;">

    `

    div_hr2.innerHTML += `

      <hr class="sidebar-divider" style="border-color:blue;">

    `

});

<div id="div_hr1" style="width=50%; display:inline-block;"></div>
<div id="div_hr2" style="width=50%; display:inline-block;"></div>

当您的两个阵列以相同的顺序出现时，此方法有效，在这种情况下，“2”用于“12 - v4”，“3”用于“100 - v500”。如果您不想依赖两个数组中项目的顺序，则可以使用基于字典的结构而不是该数组，因此您可以使用以下内容：

var quantityPerEquipment = { "12 - v4": 2, "100 - v500": 3 }

var equipos_seleccionados = ["12 - v4", "100 - v500"]
div_hr1 = document.getElementById('div_hr1')
div_hr2 = document.getElementById('div_hr2')

Object.keys(quantityPerEquipment).forEach(function(entry) {

  console.log(entry)
    for (var i = 0; i < quantityPerEquipment[entry]; i++) {

        div_hr1.innerHTML += "<select class='form-control' id='selected_equipo_seriado' name='selected_equipo_seriado' required='required' disabled><option selected value=''>" + entry + "</option></select><br>"

        div_hr2.innerHTML += `

      <input class="form-control" id="nro_serie_seriado" name="nro_serie_seriado" type="number" required="required" placeholder="Nro de serie"><br>
        
    `

    }

    div_hr1.innerHTML += `

      <hr class="sidebar-divider" style="border-color:blue;">

    `

    div_hr2.innerHTML += `

      <hr class="sidebar-divider" style="border-color:blue;">

    `

});

<div id="div_hr1" style="width=50%; display:inline-block;"></div>
<div id="div_hr2" style="width=50%; display:inline-block;"></div>

这将确保您的元素始终匹配。