從下拉選擇時的選擇下拉列表

我想在下拉列表在選項的選擇來改變圖像顯示的圖像：每節車廂從下拉選擇時的選擇下拉列表

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，我不知道。

來源

2013-05-21 Chucky Chan

看到這個[答案] [1]很完美： [1]：http://stackoverflow.com/a/3487274/1460591 – YouYou

而不是爲選項設置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

來源

2013-05-21 03:24:36

好吧，你正在做的幾件事情是錯誤的。

你的函數被調用volvoCar和你正在嘗試使用一種叫做VolvoCar功能 - JavaScript是區分大小寫的。
這不是分配事件偵聽器的最佳方法。您將其添加到HTML中，這被認爲是「雜亂」（請參閱Unobtrusive JavaScript）。此外，你想附加的功能（你通過調用它的結果）而不是功能的結果。函數是JavaScript中的第一類對象。
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).

這可以看出工作here！

來源

2013-05-21 03:31:29 phenomnomnominal

從下拉選擇時的選擇下拉列表

回答

相關問題