为何Option API的add方法无法为第二个select元素添加选项？

嘿，我完全懂你遇到的这个坑——你创建了一个<option>元素，想着一次性加到两个下拉框里，结果发现只有第一个<select>能显示这个选项，第二个啥都没有，最后只能写两遍重复代码解决，是不是特别纳闷？

问题根源：DOM元素的唯一性 #

其实这是DOM的核心规则之一：一个DOM节点只能存在于DOM树的一个位置。当你调用year.add(opt, null)时，这个opt元素已经被挂载到第一个<select>的子节点列表里了；当你再调用year_download.add(opt, null)时，浏览器并不会复制这个元素，而是直接把它从第一个<select>里“移动”到第二个里面。所以最后看起来只有第二个下拉框有这个选项（或者说最后调用add的那个），第一个里的选项就被移走了。

更优雅的解决方案（避免重复代码） #

你现在的解决方法是可行的，但确实有点冗余。我们可以把创建<option>的逻辑抽成一个复用函数，这样就不用写两遍几乎一样的代码了：

// 封装创建年份选项的函数
function buildYearOption(yearValue) {
  const opt = document.createElement("option");
  const currentYear = new Date().getFullYear();
  
  opt.value = yearValue;
  opt.text = yearValue;
  if (currentYear === yearValue) {
    opt.defaultSelected = true;
  }
  
  return opt;
}

// 给两个下拉框分别添加选项
data.years.forEach(y => {
  year.add(buildYearOption(y.year), null);
  year_download.add(buildYearOption(y.year), null);
});

或者在一次循环里创建两个独立的<option>实例，也能达到效果：

data.years.forEach(function(y){
  // 给第一个select创建专属的option
  const optForYear = document.createElement("option");
  optForYear.value = y.year;
  optForYear.text = y.year;
  if (new Date().getFullYear() === y.year){
    optForYear.defaultSelected = true;
  }
  year.add(optForYear, null);

  // 给第二个select创建另一个独立的option
  const optForDownload = document.createElement("option");
  optForDownload.value = y.year;
  optForDownload.text = y.year;
  if (new Date().getFullYear() === y.year){
    optForDownload.defaultSelected = true;
  }
  year_download.add(optForDownload, null);
});

总结一下 #

核心要点就是：每个<option>元素是唯一的DOM节点，只能属于一个父元素。如果要给多个<select>添加相同内容的选项，必须为每个<select>创建独立的<option>实例，不能复用同一个对象。

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