HTML中this.id未正常生效，如何获取选中option的data-value？

你的问题出在this的指向——在select的onchange事件里，this指代的是select元素本身，不是当前选中的option。你代码里用document.getElementById(this.id)，但你的select根本没设置id，自然找不到对应的元素，所以图片无法加载。

下面是几种可行的实现方式：

方式1：通过selectedOptions获取选中项 #

直接通过this.selectedOptions[0]拿到当前选中的option元素，再读取它的data-value：

<select onchange="document.getElementById('preview').src = this.selectedOptions[0].getAttribute('data-value')">
    <option id="id1" data-value="Image1"> Image1 </option>
    <option id="id2" data-value="Image2"> Image2 </option>
</select>
<br>
<img id="preview" height="200px">

方式2：通过selectedIndex获取选中项 #

利用select的selectedIndex属性拿到选中项的索引，再通过options数组获取对应option：

<select onchange="document.getElementById('preview').src = this.options[this.selectedIndex].dataset.value">
    <option id="id1" data-value="Image1"> Image1 </option>
    <option id="id2" data-value="Image2"> Image2 </option>
</select>
<br>
<img id="preview" height="200px">

方式3：提取为独立函数（更易维护） #

如果逻辑复杂，建议把事件处理逻辑提取成单独的JS函数，代码更清晰：

<select onchange="updatePreview(this)">
    <option id="id1" data-value="Image1"> Image1 </option>
    <option id="id2" data-value="Image2"> Image2 </option>
</select>
<br>
<img id="preview" height="200px">

<script>
function updatePreview(selectEl) {
    const selectedOption = selectEl.selectedOptions[0];
    document.getElementById('preview').src = selectedOption.dataset.value;
}
</script>

注意：如果你的Image1、Image2不是完整的图片路径（比如只是文件名），要确保路径正确，比如改成"./images/Image1.jpg"这类完整路径，否则也可能加载失败。

内容的提问来源于stack exchange，提问作者benjamin larsen