Отображение изображения при выборе опции из выпадающего списка

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). Кроме того, вы хотите прикрепить function, а не результат функции (которую вы делаете, вызывая ее). Функции - это объекты первого класса в JavaScript.

3. 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!