Html 从下拉列表中选择选项时显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16661565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying an image when selecting an option from a drop down list
提问by Chucky Chan
I'm trying to change an image upon selection of an option in a drop down list:
我正在尝试在选择下拉列表中的选项后更改图像：
function volvoCar()
{
var img = document.getElementById("image");
img.src="volvo.png";
return false;
}
And so on for each car.
依此类推每辆车。
<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>
I can't seem to find anything online that gives me a solution. Whether it's because I'm phrasing it awkwardly or because what I'm trying to do is impossible with javascript, I don't know.
我似乎无法在网上找到任何给我解决方案的东西。是因为我的措辞笨拙还是因为我试图用 javascript 做的事情是不可能的，我不知道。
回答by Trey Hunner
Instead of setting the onClickevent for an option, set the onChangeevent for the select.
不是onClick为选项设置事件，而是为选择设置onChange事件。
HTML
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
JavaScript
function setCar() {
var img = document.getElementById("image");
img.src = this.value;
return false;
}
document.getElementById("CarList").onchange = setCar;
回答by phenomnomnominal
Okay, you're doing several things wrong.
好吧，你做错了几件事。
Your function is called
volvoCarand you are attempting to use a function calledVolvoCar- JavaScript is case sensitive.This isn't the best way to assign an event-listener. You're adding it in the HTML, which is considered 'messy' (see Unobtrusive JavaScript). Also, you want to attach the
function, not the result of the function (which you are doing by calling it). Functions are first-class objects in JavaScript.onclickis the wrong event handler to use in this case. You want to use theonchangehandler of the<select>element.
您的函数被调用
volvoCar并且您正尝试使用一个被调用的函数VolvoCar- JavaScript 区分大小写。这不是分配事件侦听器的最佳方式。您将它添加到 HTML 中，这被认为是“混乱的”（请参阅Unobtrusive JavaScript）。此外，您希望附加
function，而不是函数的结果（您通过调用它来执行）。函数是 JavaScript 中的一等对象。onclick是在这种情况下使用的错误事件处理程序。您想使用元素的onchange处理程序<select>。
So:
所以：
HTML:
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:
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).
This can be seen working here!
这可以在这里看到工作！
