如何根據選擇選項框中的選擇顯示數組值？
[英]How to display an array value based on a selection from a select option box?
問題描述
<!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的答案。
3 個解決方案
解決方案1
2 2016-08-03 19:01:47
這行似乎有問題（ 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>
解決方案2
1 2016-08-03 19:27:47
這很少見，顯然你的代碼還可以，但是你給你的圖像元素的id和你document.getElementById的id有區別.getElementById對我來說似乎都是一樣的但是當我從圖像中復制並粘貼id時document.getElementById()它完美無缺。
解決方案3
0 2016-08-03 19:18:26
<!DOCTYPE html>
<html>
<body bgcolor="#999966">
<form>
<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"];
x = document.getElementById("myFruitSelect").value;
//This will give you index of the selected option.
//As the array starts from 0 , we need to subtract 1 to access the particular picture
y = parseInt(x);
m = y-1;
console.log(pictures[m]);
document.getElementById('outputImage').setAttribute("src", pictures[m]);
}
</script>
</body>
</html>
如何在自定義 select 中根據先前的選擇從 select 中刪除一個選項？
[英]How to remove an option from select based on previous selection,in custom select?
Display HTML Select box Based on Selecting Option From Other Select box 菜鳥問題
[英]Display HTML Select box Based on Selecting Option From Other Select box Noob Question
如何在 select 上的選擇器文本值中顯示一個值，以不同於下拉列表中可供選擇的選項文本？
[英]How do I display a value in a selector text value on select, to be different than the option text from drop down available for selection?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.