Fatal编程技术网
  • javascript/
  • Javascript 如何基于选择选项框中的选择显示数组值？ 请选择一种水果 苹果 橙色 菠萝 香蕉 西瓜 选择你的水果 函数myFunction（）{ var n=parseInt（x）-1； var pictures=[“apple.png”、“orange.png”、“菠萝.png”、“香蕉.png”、“西瓜.png]； var x=document.getElementById（“MyFroothSelect”）.value； document.getElementById（'outpu​tImage'）.src=图片[n-1]； }

Javascript 如何基于选择选项框中的选择显示数组值？ 请选择一种水果 苹果 橙色 菠萝 香蕉 西瓜 选择你的水果 函数myFunction（）{ var n=parseInt（x）-1； var pictures=[“apple.png”、“orange.png”、“菠萝.png”、“香蕉.png”、“西瓜.png]； var x=document.getElementById（“MyFroothSelect”）.value； document.getElementById（'outpu​tImage'）.src=图片[n-1]； }

javascript html arrays

Javascript 如何基于选择选项框中的选择显示数组值？ 请选择一种水果 苹果 橙色 菠萝 香蕉 西瓜 选择你的水果 函数myFunction（）{ var n=parseInt（x）-1； var pictures=[“apple.png”、“orange.png”、“菠萝.png”、“香蕉.png”、“西瓜.png]； var x=document.getElementById（“MyFroothSelect”）.value； document.getElementById（'outpu​tImage'）.src=图片[n-1]； },javascript,html,arrays,Javascript,Html,Arrays,如有任何帮助或指向正确方向，我们将不胜感激 我试图创建一个页面，用户从下拉列表中选择一个选项，然后根据用户的选择显示一个数组值。我不知道如何根据用户选择访问数组值。我只能使用HTML和脚本，所以请不要回答jQuery。这一行似乎有问题（var n=parseInt（x）-1；），因为您在定义它之前使用的是x。您可以将该声明移动到var x声明下方，或者将其全部删除： 请选择一种水果 苹果 橙色 菠萝 香蕉 西瓜 选择你的水果 函数myFunction（）{ var pictures=[“a

如有任何帮助或指向正确方向，我们将不胜感激

我试图创建一个页面，用户从下拉列表中选择一个选项，然后根据用户的选择显示一个数组值。我不知道如何根据用户选择访问数组值。我只能使用HTML和脚本，所以请不要回答jQuery。

这一行似乎有问题（
var n=parseInt（x）-1；
），因为您在定义它之前使用的是
x
。您可以将该声明移动到
var x
声明下方，或者将其全部删除：


请选择一种水果
苹果
橙色
菠萝
香蕉
西瓜


选择你的水果
函数myFunction（）{
var pictures=[“apple.png”、“orange.png”、“菠萝.png”、“香蕉.png”、“西瓜.png]；
var x=document.getElementById（“MyFroothSelect”）.value；
document.getElementById（'outputImage'）.src=pictures[parseInt（x，10）-1]；
}


请选择一种水果
苹果
橙色
菠萝
香蕉
西瓜


选择你的水果
函数myFunction（）{
var pictures=[“apple.png”、“orange.png”、“菠萝.png”、“香蕉.png”、“西瓜.png]；
x=document.getElementById（“MyFroothSelect”）.value；
//这将为您提供所选选项的索引。
//当数组从0开始时，我们需要减去1来访问特定的图片
y=parseInt（x）；
m=y-1；
控制台日志（图片[m]）；
document.getElementById（'outpu​设置属性（“src”，图片[m]）；
}
这很少见，显然您的代码还可以，但是您给图像元素的id与
文档上的id之间存在差异。getElementById
对我来说似乎都是一样的，但当我将图像中的id复制并粘贴到
文档时。getElementById（）
它工作得非常完美。

值得注意的是，它没有引发错误的原因是因为。一旦我选择了一个选项，我怎么还可以有一个div显示和图片显示？忘记添加了，但它确实有效：）@RyanStav在
<!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('outpu​tImage').src = pictures[n-1];
}
</script>
</body>
</html>

<!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('outpu​tImage').setAttribute("src", pictures[m]);

    }
</script>

</body>
</html>