IE 11中使用JS移除Select选项出现异常的技术求助

这个IE11的诡异bug我之前也踩过类似的坑，结合你的情况，给你几个实用的排查和解决方向：

• 换用更稳妥的DOM移除方法
  虽然MDN标注HTMLSelectElement.remove(index)支持IE，但部分特定IE11版本对这个方法的实现存在bug。可以改用标准的removeChild方法来替代，兼容性更可靠：

  var x = document.getElementById("mySelect");
  if (x.options[0]) { // 先判断选项存在，避免报错
      x.removeChild(x.options[0]);
  }
  

• 排查代码是否重复执行
  会不会在这个问题IE版本里，你的移除逻辑被触发了两次？比如事件绑定重复、异步逻辑重复触发。可以加个简单的标记来避免重复执行：

  var x = document.getElementById("mySelect");
  if (!x.dataset.hasRemovedFirst) {
      x.remove(0);
      x.dataset.hasRemovedFirst = "true";
  }
  

  或者在控制台打印日志，确认代码执行次数。

• 操作静态的Options副本
  IE的select.options是动态DOM集合，每次操作后集合会自动更新，偶尔会导致索引混乱。可以先把它转成静态数组再操作：

  var x = document.getElementById("mySelect");
  // 转成静态数组，避免动态集合的索引问题
  var staticOptions = Array.prototype.slice.call(x.options);
  if (staticOptions.length > 0) {
      x.removeChild(staticOptions[0]);
  }
  

• 强制IE使用标准文档模式
  有时候IE11会自动切换到兼容模式，导致JS行为异常。在HTML头部最前面添加这个meta标签，强制IE用最新的标准模式渲染：

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  

• 测试简化版页面
  把页面简化成只包含目标select和移除代码，看看问题是否还存在。如果简化后正常，说明是页面其他脚本和移除逻辑冲突了，比如其他代码修改了select的选项集合，或者有事件委托的干扰。

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