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; 
};

`

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

1 个答案: