更改多个下拉跌落的图像.一个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:UsersGaia SoulDesktopPokemon DW Spirites - 20170920T221714Z-001Pokemon DW Spirites387.png">Turtwig</option>
<option value="C:UsersGaia SoulDesktopPokemon DW Spirites - 20170920T221714Z-001Pokemon DW Spirites390.png">Piplup</option>
<option value="C:UsersGaia SoulDesktopPokemon DW Spirites - 20170920T221714Z-001Pokemon DW Spirites393.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:UsersGaia SoulDesktopPokemon DW Spirites - 20170920T221714Z-001Pokemon DW Spirites387.png">Turtwig</option>
<option value="C:UsersGaia SoulDesktopPokemon DW Spirites - 20170920T221714Z-001Pokemon DW Spirites393.png">Piplup</option>
<option value="C:UsersGaia SoulDesktopPokemon DW Spirites - 20170920T221714Z-001Pokemon DW Spirites390.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; 
};

`