使用 JS 更改 SELECT 选项时收到"Cannot set properties of null"错误

Question

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

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

My HTML code

<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>";
}
});

我在本地主机上测试了这段代码，它工作得很好。但是当我把它上传到服务器后，控制台显示了这个错误。

Answer 1

这是可能的JS代码运行之前，select标记呈现，这取决于在哪里script标签链接这个文件位于。在任何情况下，您可以通过将defer属性添加到script标记(如果它具有src属性)或将其放置在body标记的末尾来修复此问题。

Answer 2

我怀疑您动态地修改了select2 HTML元素，因此保存在变量中的元素不再有价值了。您可以尝试这样做，以便在每次回调时获得更新的引用:

var select1 = document.getElementById("field_option-1");
select1.addEventListener('change', function(){
var select2 = document.getElementById("field_option-2");
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>";
}
});

<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>