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 onClick
event for an option, set the onChange
event 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
volvoCar
and 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.onclick
is the wrong event handler to use in this case. You want to use theonchange
handler 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!
这可以在这里看到工作!