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

问题描述：

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

值得注意的是，这并没有抛出错误的原因是因为[吊起]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting ）。 – 4castle

我怎样才能有一个div显示和图片显示一旦我选择一个选项？忘了添加，但它确实工作:) –

@RyanStav使用'onchange'上的'

答

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

答

这是罕见的，显然你的代码是好的，但存在的差异身份证给你的图像元素和你的document.getElementById两者似乎都是相同的，但当我复制并粘贴图像的ID到document.getElementById()它的作品完美。

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

相关推荐