JS循环生成select下拉框仅前7个选项正常其余显示undefined如何解决

核心错误原因 #

你代码的问题出在内层option生成循环的索引使用错误：
内层循环遍历arrayList用的变量是z，但你给option.value和option.text赋值时，错误使用了外层循环的i作为arrayList的索引。
arrayList的长度只有7，索引范围是0~6，当外层循环的i >=7时，arrayList[i]取值就是undefined，刚好对应你观察到的前7个select正常、后续select选项全为undefined的现象。

其他需要修复的问题 #

• 未正确获取SelectContainer对应的DOM元素，直接使用变量会抛出引用错误
• 固定配置的arrayList不需要写在循环内部重复声明，放在循环外性能更好
• 建议用let/const替代var声明变量，避免变量提升带来的意外问题
• 如果arrayinput里的a~j没有提前定义，数组初始化会报错，如果只是需要生成10个select，可以直接控制循环次数即可

修复后完整代码 #

HTML代码 #

<div id="SelectContainer"></div>

JavaScript代码 #

// 提前获取容器DOM，固定配置提到循环外
const myParent2 = document.getElementById('SelectContainer');
const arrayList = ["Green", "Red", "Yellow", "Blue", "Brown", "Grey", "Orange"];
// 如果arrayinput的a~j只是用来控制生成10个select，也可以直接写循环次数：for(let i=0; i<10; i++)
const arrayinput = [a, b, c, d, e, f, g, h, i, j]; // 注意这里的a~j需要提前定义，否则会报错

for (let i = 0; i < arrayinput.length; i++) {
  const SelectNew = document.createElement("select");
  SelectNew.className = 'SelectNew';
  SelectNew.id = 'SelectNew-' + i;
  myParent2.appendChild(SelectNew);

  // 内层循环用z作为arrayList的索引取值
  for (let z = 0; z < arrayList.length; z++) {
    const option = document.createElement("option");
    option.value = arrayList[z];
    option.text = arrayList[z];
    SelectNew.appendChild(option);
  }
}

内容的提问来源于stack exchange，提问作者Jan P