在多个下拉菜单中更改图像。一个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的一个功能为他们所有。
你有两个选择元素的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;
};
`
所以我可以使用相同的功能,如果我将java更改为函数swapImage(sel) –
是的,因为不是抓取dom元素的值,而是将它传递给函数。 认为推动的价值,而不是从功能内拉动它 – Koborl
此外,我已经把JavaScript中的
标签,如果这很好 –你需要有唯一的ID对你的'img'元素 - HTTPS://developer.mozilla。组织/ EN-US /文档/网页/ HTML/Global_attributes/ID。 – bazzells
然后,您可以将唯一的'ID'传递给绑定到'onChange'的'swapImage'函数调用。在document.getElementById(“imageToSwap”)中不是对'ID'进行硬编码,而是使用传入的'ID'来获得正确的'img'元素。 – bazzells