javascript - 从下拉列表中选择选项时显示图像

Question

因此，当选择一个选项时，ID为“ phone”的图像应根据选择的选项而变化

HTML：

<div id="form1">

  <img id="phone" src="iphone6.jpg" width="294" height="320"/>
  <select id="phoneList">
    <option value="iphone1.jpg">Apple iPhone 11 Pro Max (2019) 512GB Silver</option>
    <option value="iphone2.jpg">Apple iPhone 11 (2019) 128GB Black</option>
    <option value="iphone3.jpg">Apple iPhone 11 (2019) 256GB White</option>
  </select>
  </div>

Javascript：

function setPhone() {
    var img = document.getElementById("phone");
    img.src = this.value;
    return false;
}
document.getElementById("phoneList").onchange = setPhone;

Answer 1

您可能按照注释中的建议编写了错误的路径（在这种情况下，图像应与HTML文件位于同一目录中）或放错了脚本部分。这对我来说很好：

<div id="form1">
    <img id="phone" src="iphone6.jpg" width="294" height="320"/>
    <select id="phoneList">
        <option value="iphone1.jpg">Apple iPhone 11 Pro Max (2019) 512GB Silver</option>
        <option value="iphone2.jpg">Apple iPhone 11 (2019) 128GB Black</option>
        <option value="iphone3.jpg">Apple iPhone 11 (2019) 256GB White</option>
    </select>
</div>
<script>
function setPhone() {
    var img = document.getElementById("phone");
    img.src = this.value;
    return false;
}
document.getElementById("phoneList").onchange = setPhone;
</script>