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

Question

所以我尝试制作一个图表，其中包含基于下拉选择在表格的每个单元格中弹出的图像。 我遇到了麻烦，因为有多个选择，我似乎无法让一个 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 保留在一个函数中。

Answer 1

两个选择元素的 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; 
};

`