在多个下拉菜单中更改图像。一个Javascript（更新）

因此，我试图制作一个图表，并根据下拉选择在表格的每个单元格中弹出图像。我一直有麻烦，因为有多个选择，我似乎无法得到一个JavaScript函数来为所有的下拉菜单工作（都具有相同的可用选项和图像）在多个下拉菜单中更改图像。一个Javascript（更新）

这是我现在有

<script type="text/javascript"> 
function swapImage(){ 
    var image = document.getElementById("imageToSwap"); 
    var dropd = document.getElementById("dlist"); 
    image.src = dropd.value;   
}; 

</script><script> 

function swap2twinleaf(){ 
    var image = document.getElementById("twinleaf2swap"); 
    var dropd = document.getElementById("dlist2"); 
    image.src = dropd.value;   
}; 

</script>

和HTML我有

<img id="imageToSwap" alt="sprite" src="Pokemon%20DW%20Sprites/387.png"> 

<select id="dlist" onChange="swapImage()"> 
<option value="C:\Users\Gaia Soul\Desktop\Pokemon DW Spirites - 20170920T221714Z-001\Pokemon DW Spirites\387.png">Turtwig</option> 
<option value="C:\Users\Gaia Soul\Desktop\Pokemon DW Spirites - 20170920T221714Z-001\Pokemon DW Spirites\390.png">Piplup</option> 
<option value="C:\Users\Gaia Soul\Desktop\Pokemon DW Spirites - 20170920T221714Z-001\Pokemon DW Spirites\393.png">Chimchar</option> 
</select> 


</td><td> 

<img id="twinleaf2swap" alt="sprite" src="Pokemon%20DW%20Sprites/387.png"> 
<select id="dlist2" onChange="swap2twinleaf()"> 
<option value="C:\Users\Gaia Soul\Desktop\Pokemon DW Spirites - 20170920T221714Z-001\Pokemon DW Spirites\387.png">Turtwig</option> 
<option value="C:\Users\Gaia Soul\Desktop\Pokemon DW Spirites - 20170920T221714Z-001\Pokemon DW Spirites\393.png">Piplup</option> 
<option value="C:\Users\Gaia Soul\Desktop\Pokemon DW Spirites - 20170920T221714Z-001\Pokemon DW Spirites\390.png">Chimchar</option> 
</select>

的第一个作品，但第二个似乎永远不会做任何事情。我确实有一个相当大的表，所以我想保持JavaScript的一个功能为他们所有。

来源

2017-09-25 Tyler Stephenson

此外，我已经把JavaScript中的标签，如果这很好 –

你需要有唯一的ID对你的'img'元素 - HTTPS：//developer.mozilla。组织/ EN-US /文档/网页/ HTML/Global_attributes/ID。 – bazzells

然后，您可以将唯一的'ID'传递给绑定到'onChange'的'swapImage'函数调用。在document.getElementById（“imageToSwap”）中不是对'ID'进行硬编码，而是使用传入的'ID'来获得正确的'img'元素。 – bazzells

你有两个选择元素的ID重复。

基本上当你调用这个

var dropd = document.getElementById("dlist");

你会得到它遇到这样你将永远从顶部下拉框中获取值的第一个元素

你可以在Onchange传递值事件并从那里开始

<select onChange="swapImage(this)">

然后使用相同的函数，而不是从您传递它的DOM元素中获取值作为论据。

function swapImage(sel){ 
    //get the value selected in the dropdown box 
    var value = sel.value; 
};

来源

2017-09-25 20:25:59 Koborl

所以我可以使用相同的功能，如果我将java更改为函数swapImage（sel） –

是的，因为不是抓取dom元素的值，而是将它传递给函数。认为推动的价值，而不是从功能内拉动它 – Koborl

在多个下拉菜单中更改图像。一个Javascript（更新）

回答

相关问题