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

我正在尝试在下拉列表中选择选项后更改图像：

function volvoCar()
{
var img = document.getElementById("image");
img.src="volvo.png";
return false;
}

每辆车都是如此

<img id="image" src="Null_Image.png"/>
<select id="CarList">
<option onclick="nullCar()">No Car</option>
<option onclick="volvoCar()">Volvo</option>
<option onclick="audiCar()">Audi</option></select>

我似乎在网上找不到任何解决方案。我不知道是因为我措词笨拙还是因为我试图用javascript做的事情是不可能的。

不是为选项设置onClick事件，而是为select设置onChange事件

HTML

---

好吧，你做错了几件事

您的函数名为volvoCar，您正在尝试使用一个名为volvoCar的函数-JavaScript区分大小写

这不是分配事件侦听器的最佳方法。您将其添加到HTML中，这被认为是“凌乱的”，请参见。另外，您希望附加函数，而不是通过调用函数所执行的函数的结果。函数是JavaScript中的一级对象

在这种情况下，onclick是错误的事件处理程序。您希望使用元素的onchange处理程序

因此：

HTML:

这是可以看到的工作

看这个[1]很完美[1]：

<img id="image" src="Null_Image.png" />
<select id="CarList">
    <option value="Null_Image.png">No Car</option>
    <option value="volvo.png">Volvo</option>
    <option value="audi.png">Audi</option>
</select>

function setCar() {
    var img = document.getElementById("image");
    img.src = this.value;
    return false;
}
document.getElementById("CarList").onchange = setCar;

<img id="image" src="Null_Image.png"/>
<select id="CarList">
    <option value="Null">No Car</option>
    <option value="Volvo">Volvo</option>
    <option value="Audi">Audi</option>
</select>

var changeCarImage = function () { 
    document.getElementById('image').src = this.options[this.selectedIndex].value + "_Image.png"
}

var carList = document.getElementById('CarList');
carList.addEventListener('change', changeCarImage, false); // Note this has some issues in old browsers (IE).