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

Question

我试图在选择下拉列表中的选项后更改图像:

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 实现，我不知道。

Answer 1

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

HTML

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

JavaScript

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

Here's a working demo