尝试将数组项传递给 html 表单中的 getElementById() 选择选项答案

【问题标题】：Trying to pass array items to getElementById() select option in html form尝试将数组项传递给 html 表单中的 getElementById() 选择选项
【发布时间】：2019-05-31 05:25:57
【问题描述】：

我有一个动态单选选项，可以触发两个不同的数组显示在下拉选择中。

https://jsfiddle.net/carvingpixel/5mcux28z/3/

<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-kits" name="option"   onclick="change(this)">Kits  
<input type="radio" id="radio-starLabs" name="option" onclick="change(this)">StarLabs
&nbsp;&nbsp;
<select id="arrays">
<option id="items"></option>
</select>    
</form>  

<script>
    var kits = ["Lego WeDo", "Force & Motion", "Bernoulli's Lift"];
    var starLabs = ["Constellations", "Starfields", "Moon"];

    function change(radio) {
        if (radio.checked && radio.id === "radio-kits") {

            for (var i = 0; i < kits.length; i++) {
                document.getElementById("items").innerHTML = kits[i];
            }
        } else {
            for (var i = 0; i < starLabs.length; i++) {
                document.getElementById("items").innerHTML = starLabs[i];
            }
        }
    }
</script>

我已经完成了大部分工作，但我坚持让数组的每个项目都显示在列表中。目前，它显示的是迭代中的最后一项，而不是每一项。

【问题讨论】：

我有点困惑。 = 是赋值，而不是附加。而你正在做document.getElementById("items").innerHTML = kits[i];。所以当然它只会是一个单一的值。最后一个。如果你想追加，那就是+=
另外，不要在这样的循环中重复查找。在循环外进行查找，将其放入变量中，然后在循环中使用该变量。
次要注意事项，避免内联绑定。请改用addEventListener()。
how to dynamically add options to an existing select in vanilla javascript的可能重复
@Taplar 添加如下事件监听器，您将如何传递从套件或 starlabs 中选择的收音机？ var el = document.getElementById("radio-buttons"); el.addEventListener("click", function(){change()}, false);

标签： javascript arrays

【解决方案1】：

您的错误是直接使用一个<option>，而您应该使用<select> 和多个 <option>。

在下面的 sn-p 中，我为每个数组条目生成新选项，然后使用 innerHtml 将它们附加到 <select>。

const kits = ['Lego WeDo', 'Force & Motion', 'Bernoulli\'s Lift '];
const starLabs = ['Constellations', 'Starfields', 'Moon'];

// Function that is going to change the select options
function fillSelect(values) {
  document.getElementById("arrays").innerHTML =
    values.reduce((tmp, x) => `${tmp}<option>${x}</option>`, '');
}

function change(radio) {
  if (radio.checked && radio.id === 'radio-kits') {
    fillSelect(kits);
  } else {
    fillSelect(starLabs);
  }
}

<form name="frmRadio" id="radio-buttons" action="">
  <input type="radio" id="radio-kits" name="option" onclick="change(this)">Kits
  <input type="radio" id="radio-starLabs" name="option" onclick="change(this)">StarLabs &nbsp;&nbsp;
  <select id="arrays">
    <option id="items"></option>
  </select>
</form>

【讨论】：

谢谢你，Grégory NEUT！这也使用了 Tapler 的建议，即不要通过具有函数来重复循环。我还可以使用以下<option value=${x}>${x}</option> 轻松地通过此答案为选项添加价值

【解决方案2】：

var node = document.createElement("LI"); // Create a <li> node

  var textnode = document.createTextNode("Water"); // Create a text node

  node.appendChild(textnode); // Append the text to <li>

  document.getElementById("myList").appendChild(node); // Append <li> to <ul> with id="myList"

这应该对你有帮助

【讨论】：

【解决方案3】：

每次迭代都将前一个值替换为当前值，因此最后一个值是正在使用的值是正常的。您还需要使用选择的 id 而不是选项的 id 来添加更多选项...

所以你必须做到以下几点：

var kits = ["Lego WeDo", "Force & Motion", "Bernoulli's Lift"];
var starLabs = ["Constellations", "Starfields", "Moon"];

function change(radio) {
  document.getElementById("selectList").innerHTML = ""
  var select = document.getElementById("selectList")
  if (radio.checked && radio.id === "radio-kits") {
    for (var i = 0; i < kits.length; i++) {
    	select.options[select.options.length] = new Option(kits[i]);
      
    }
  } else {
    for (var i = 0; i < starLabs.length; i++) {
    	select.options[select.options.length] = new Option(starLabs[i]);
    }
  }
}

<div id="">
  <form name="frmRadio" id="radio-buttons" action="">
    <input type="radio" id="radio-kits" name="option" onclick="change(this)">Kits
    <input type="radio" id="radio-starLabs" name="option" onclick="change(this)">StarLabs &nbsp;&nbsp;
    <select id="selectList">
    </select>
  </form>
</div>

【讨论】：