[英]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的答案。
这行似乎有问题( 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>
这很少见,显然你的代码还可以,但是你给你的图像元素的id和你document.getElementById
的id有区别.getElementById对我来说似乎都是一样的但是当我从图像中复制并粘贴id时document.getElementById()
它完美无缺。
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.