<!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>关于javascript - 如何根据选择选项框中的选择显示数组值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38751618/