从下拉列表中选择选项时显示图像 [英] Displaying an image when selecting an option from a drop down list

问题描述

  function volvoCar（）
 
我试图在选择下拉列表中的选项时更改图像： 
 {
 var img = document.getElementById（image）; 
 img.src =volvo.png; 
返回false; 
} 
  

每个车都是如此。

 < img id =imagesrc =Null_Image.png/> 
< select id =CarList> 
< option onclick =nullCar（）>无车< / option> 
< option onclick =volvoCar（）> Volvo< / option> 
< option onclick =audiCar（）> Audi< / option>< / select> 
  

我似乎无法在网上找到任何提供解决方案的东西。不管是因为我的表达方式太笨拙，还是因为我试图做的事情是不可能用javascript，我不知道。

>

不是为选项设置 onClick 事件，而是为select设置 onChange 事件。 p>

HTML

 < img id =imagesrc =Null_Image .png/> 
< select id =CarList> 
< option value =Null_Image.png>无车< / option> 
< option value =volvo.png>沃尔沃< / option> 
< option value =audi.png> Audi< / option> 
< / select> 
  

JavaScript

  function setCar（）{
 var img = document.getElementById（image）; 
 img.src = this.value; 
返回false; 
} 
 document.getElementById（CarList）。onchange = setCar; 
  

这是一个工作演示

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.

解决方案

Instead of setting the onClick event for an option, set the onChange event for the select.

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

这篇关于从下拉列表中选择选项时显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！