如何通过JS为HTML表格中的select输入框加载选项？

你的代码无法正常给select填充选项，核心问题是class选择器语法错误，还有一些可优化的点，具体修正如下：

1. 修正选择器语法 #

JS里通过class选择DOM元素时，必须在类名前加.前缀，你原来直接写tableBodySelect会被当作标签名查找，自然找不到目标select。需要把两处document.querySelector('tableBodySelect')都改成document.querySelector('.tableBodySelect')。

2. 优化选项清空逻辑 #

原来循环删除option的写法可以简化为直接清空select的innerHTML，代码更简洁高效。

3. 移除HTML无效属性 #

<select>标签本身不支持value属性，直接移除这个多余属性即可，默认选中项通过option的selected属性控制。

修正后的完整代码 #

JS代码

function loadTelaOptions(telaOptions) {
  telaOptions = ["09-Black", "11-LT Jaspe"]; // 测试用数据
  const selectList = document.querySelector('.tableBodySelect');
  
  // 清空现有选项
  selectList.innerHTML = '';
  
  // 添加空选项
  let emptyOption = document.createElement("option");
  emptyOption.value = "";
  emptyOption.text = "";
  selectList.appendChild(emptyOption);
  
  // 遍历添加选项
  telaOptions.forEach(item => {
    let option = document.createElement("option");
    option.value = item.toLowerCase();
    option.text = item;
    selectList.appendChild(option);
  });
}

HTML代码

<td>
  <select name='tableselect' required='required' class='tableBodySelect'>
  </select>
</td>

注意事项 #

要确保调用loadTelaOptions()的时机是在表格行（包括这个select元素）已经渲染到DOM之后，比如放在表格渲染完成的回调里，或者页面的DOMContentLoaded事件中，避免因元素未加载导致找不到目标的问题。

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