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

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;

这是一个工作演示

Answer 2

好吧，你做错了几件事。

1. 您的函数名为volvoCar而您正尝试使用名为VolvoCar的函数 - JavaScript 区分大小写。

2. 这不是分配事件侦听器的最佳方式。 您将它添加到 HTML 中，这被认为是“混乱的”（请参阅Unobtrusive JavaScript ）。 此外，您想附加function ，而不是function的结果（您通过调用它来执行）。 函数是 JavaScript 中的一等对象。

3. 在这种情况下， 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).

这可以在这里看到工作！