如何避免拼接select的option时出现[object HTMLOptionElement]问题

你直接把HTMLOptionElement DOM对象和字符串拼接时，JavaScript会自动调用对象的toString()方法，所以输出的是[object HTMLOptionElement]这类对象类型标识，而非你需要的元素内容或DOM结构。

这里提供两种常用实现方式：

方案1：直接操作DOM节点插入（推荐，无转义风险） #

如果目标是把option动态插入到另一个select中，直接克隆/移动DOM节点是最稳妥的方式，不需要拼接字符串：

// 拿到原始select和目标select，给空select新增id="target-select"方便选择
const originSelect = document.getElementById('main-products-images-standards-select');
const targetSelect = document.getElementById('target-select');

// 遍历原始option
for (let i = 0; i < originSelect.options.length; i++) {
  // 克隆option节点，true代表深克隆（复制内容和所有属性）
  const cloneOption = originSelect.options[i].cloneNode(true);
  // 插入到目标select
  targetSelect.appendChild(cloneOption);
}

如果你是要移动option而非复制，不需要调用cloneNode(true)，直接append原节点即可。DOM节点是单例的，插入到新父元素后会自动从原父元素中移除。

方案2：拼接HTML字符串 #

如果你确实需要先拼接成HTML字符串再统一赋值，取每个option的outerHTML属性即可，该属性返回元素的完整HTML字符串：

const originOptions = document.getElementById('main-products-images-standards-select').options;
let standards = '';
for(let i = 0 ; i < originOptions.length ; i++) {
  standards += originOptions[i].outerHTML;
}
// 把拼接好的HTML字符串赋值给目标select的innerHTML
document.getElementById('target-select').innerHTML = standards;

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