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

好的，你做错了几件事。

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

所以：

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

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

2 个答案: