Question

<!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的答案。

Answer 1

这一行似乎有问题（...+++...+++...+++123321），因为您在定义它之前使用var n =parseInt(x) -1;。您可以将该声明移到x声明下面，或完全删除它：

var x

Answer 2

这很少见，显然你的代码还可以，但是你给你的图片元素的id和你document.getElementById上的id之间的差异对我来说都是一样的但是当我复制并粘贴时id从图像到document.getElementById()它完美无缺。

Answer 3

<!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>

如何根据选择选项框中的选择显示数组值？

3 个答案: