从下拉选择时的选择下拉列表

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

Answer 2

好吧，你正在做的几件事情是错误的。

1. 你的函数被调用volvoCar和你正在尝试使用一种叫做VolvoCar功能 - JavaScript是区分大小写的。

2. 这不是分配事件侦听器的最佳方法。您将其添加到HTML中，这被认为是“杂乱”（请参阅​​Unobtrusive JavaScript）。此外，你想附加的功能（你通过调用它的结果）而不是功能的结果。函数是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). 

这可以看出工作here！