JS联动修改SELECT选项报Cannot set properties of null错误

报错Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')的本质是执行属性赋值操作时，操作目标是null值——也就是代码里select2（或select1）没有成功获取到对应的DOM节点。
本地运行正常、上传服务器后复现的核心诱因是脚本执行时机差异：

• 本地环境中脚本通常放在两个<select>节点之后引入，执行获取元素逻辑时，DOM节点已经被浏览器解析完成，getElementById可以正常拿到元素对象。
• 上传服务器后，受站点代码压缩合并规则、静态资源加载策略、CDN缓存配置影响，脚本很可能被提前插入到<head>标签内、或者目标DOM节点之前的位置执行。此时浏览器还没解析到id为field_option-1、field_option-2的两个下拉框节点，getElementById会直接返回null，后续绑定事件、修改innerHTML的操作自然会抛出类型错误。
  另外贴出的代码片段里条件判断的字符串闭合引号误用了全角中文引号，部分服务端的代码转码、压缩逻辑会放大这个语法问题，也可能触发异常。

按优先级选择方案即可解决：

• 方案1：调整脚本引入位置，把包含这段逻辑的JS文件/代码块移动到</body>闭合标签之前，确保脚本执行时所有DOM节点已经解析完成。
• 方案2：给逻辑增加DOM加载完成监听，不依赖脚本位置，等DOM树解析完毕后再获取元素、绑定事件，同时增加空值判断兜底极端场景，修正代码里的全角引号笔误：

document.addEventListener('DOMContentLoaded', function () {
  const select1 = document.getElementById('field_option-1');
  const select2 = document.getElementById('field_option-2');
  if (!select1 || !select2) return;

  select1.addEventListener('change', function () {
    const selectValue = this.value;
    if (selectValue === 'first') {
      select2.innerHTML = '<option value="new1">New option 1</option>';
    } else if (selectValue === 'second') {
      select2.innerHTML = '<option value="new2">New option 2</option>';
    } else if (selectValue === 'third') {
      select2.innerHTML = '<option value="new3">New option 3</option>';
    }
  });
});

• 方案3：如果脚本标签配置了async属性，该模式下脚本加载完成后会立刻执行，不会等待DOM解析，这种场景必须使用上述DOM加载监听包裹逻辑；如果使用defer属性，脚本默认会在DOM解析完成后执行，不会出现时机问题。

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