JavaScript无法填充下拉列表求助：下拉框无元素显示

嘿，我一眼就瞅到问题所在啦！你这段代码里的核心问题是从来没有创建过<option>元素，直接就去给option变量赋值，浏览器根本不知道这个option是啥，自然没法把它加到下拉框里～

修复后的完整代码 #

<body>
  <h1>lalal</h1>
  <form>
    <select id="wineType"></select>
  </form>
  <script>
    // Populate ddl
    var wineType = document.querySelector('#wineType');
    var types = ['White', 'Red'];
    types.forEach(element => {
      // 关键步骤：创建一个新的option元素
      const option = document.createElement('option');
      option.textContent = element;
      option.value = element;
      wineType.appendChild(option);
    });
  </script>
</body>

为什么之前的代码不行？ #

你之前的代码直接使用option变量，但没有通过document.createElement('option')来初始化它。这个变量在当前作用域里是未定义的，浏览器执行到这里会报错（你可以打开开发者工具的控制台看看，肯定有ReferenceError），导致后续的代码都没法正常运行。

额外小提示 #

如果你的浏览器支持ES6+，也可以用更简洁的写法，比如通过innerHTML一次性插入所有选项：

wineType.innerHTML = types.map(type => `<option value="${type}">${type}</option>`).join('');

这种写法对于简单的选项填充来说更高效，不过循环创建元素的方式在需要给选项绑定事件的时候更灵活，看你的需求选择就好～

内容的提问来源于stack exchange，提问作者MammaDiGrenie'