從下拉列表中選擇選項時顯示圖像

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;

這是一個工作演示

Answer 2

好吧，你做錯了幾件事。

1. 您的函數名為volvoCar而您正嘗試使用名為VolvoCar的函數 - JavaScript 區分大小寫。

2. 這不是分配事件偵聽器的最佳方式。 您將它添加到 HTML 中，這被認為是“混亂的”（請參閱Unobtrusive JavaScript ）。 此外，您想附加function ，而不是function的結果（您通過調用它來執行）。 函數是 JavaScript 中的一等對象。

3. 在這種情況下， onclick是錯誤的事件處理程序。 您想使用<select>元素的onchange處理程序。

所以：

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).

這可以在這里看到工作！