我编写了一个脚本，用于根据第一个 SELECT 元素选项更改第二个 SELECT 元素的选项。但问题是，每当我尝试更改第二个 SELECT 选项时，控制台都会显示以下错误。 重要提示：这是我的整个脚本和页面中的一小段代码。

未捕获的 TypeError：无法设置 null 的属性（设置“innerHTML”）

我的 HTML 代码

<select id="field_option-1">
    <option value="first">First option</option>
    <option value="second">Second option</option>
    <option value="third">Third option</option>
</select>

<select id="field_option-2">
    <option value="">Select one</option>
</select>

我的 JS 代码

var select1 = document.getElementById("field_option-1");
var select2 = document.getElementById("field_option-2");

select1.addEventListener('change', function(){
    var 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>";
    }
});

我在本地主机上测试了此代码，它运行良好。但在我将其上传到服务器后，控制台显示该错误。