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

【问题标题】：Displaying an image when selecting an option from a drop down list从下拉列表中选择选项时显示图像
【发布时间】：2013-05-15 17:19:49
【问题描述】：

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

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 是不可能的。

【问题讨论】：

看到这个How to Answer[1] 这是完美的：[1]：stackoverflow.com/a/3487274/1460591

标签： javascript html image select option

【解决方案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

【讨论】：

【解决方案2】：

好吧，你做错了几件事。

您的函数名为 volvoCar，而您正尝试使用名为 VolvoCar 的函数 - JavaScript 区分大小写。
这不是分配事件侦听器的最佳方式。您将它添加到 HTML 中，这被认为是“杂乱无章的”（请参阅Unobtrusive JavaScript）。此外，您想附加 function，而不是函数的结果（通过调用它来执行）。函数是 JavaScript 中的一等对象。
onclick 是在这种情况下使用的错误事件处理程序。您想使用<select> 元素的onchange 处理程序。

所以：

HTML：

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

JS：

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

这可以看到here！

【讨论】：