如何根據選擇選項框中的選擇顯示數組值？

<!DOCTYPE html> 
<html> 
<body bgcolor="#999966"> 
<select id="myFruitSelect"> 
    <option value="0"> Please Choose a Fruit </option> 
    <option value="1"> Apple</option> 
    <option value="2">Orange</option> 
    <option value="3">Pineapple</option> 
    <option value="4">Banana</option> 
    <option value="5"> Watermelon </option> 
    </select> 
</form> 
<br> 
<button onclick="myFunction()"> Select Your Fruit</button> 
<img id="outputImage" src=""/> 

<script> 
function myFunction() { 
    var n =parseInt(x) -1; 
    var pictures=[ "apple.png", "orange.png", "pineapple.png", "banana.png", "Watermelon.png"]; 
    var x = document.getElementById("myFruitSelect").value; 
    document.getElementById('outputImage').src = pictures[n-1]; 
} 
</script> 
</body> 
</html>

在正確的方向任何幫助或點表示讚賞如何根據選擇選項框中的選擇顯示數組值？

我試圖做一個頁面，用戶從下拉列表和一個數組值的選項，然後根據用戶的選擇顯示。我不知道如何根據用戶選擇訪問數組值。我只能使用HTML和腳本，所以沒有與jQuery的答案請。

來源

2016-08-03 Ryan Stav

此行似乎有問題（var n =parseInt(x) -1;），因爲您在定義它之前使用的是x。你可以只移動該聲明下方的var x聲明，或得到完全擺脫它：

<!DOCTYPE html> 
 
<html> 
 
<body bgcolor="#999966"> 
 
<select id="myFruitSelect"> 
 
    <option value="0"> Please Choose a Fruit </option> 
 
    <option value="1"> Apple</option> 
 
    <option value="2">Orange</option> 
 
    <option value="3">Pineapple</option> 
 
    <option value="4">Banana</option> 
 
    <option value="5"> Watermelon </option> 
 
    </select> 
 
</form> 
 
<br> 
 
<button onclick="myFunction()"> Select Your Fruit</button> 
 
<img id="outputImage" src=""/> 
 

 
<script> 
 
function myFunction() { 
 
    var pictures= [ "apple.png", "orange.png", "pineapple.png", "banana.png", "Watermelon.png"]; 
 
    var x = document.getElementById("myFruitSelect").value; 
 
    document.getElementById('outputImage').src = pictures[parseInt(x, 10)-1]; 
 
} 
 
</script> 
 
</body> 
 
</html>

來源

2016-08-03 19:01:47

值得注意的是，這並沒有拋出錯誤的原因是因爲[吊起]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting ）。 – 4castle

我怎樣纔能有一個div顯示和圖片顯示一旦我選擇一個選項？忘了添加，但它確實工作:) –

@RyanStav使用'onchange'上的'

如何根據選擇選項框中的選擇顯示數組值？

回答