複数のドロップダウンで画像を変更します。 1つの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> 

最初のものは作品を持っていますが、もう一つは決して何もするようです。 私は非常に大きなテーブルを持っているので、私はそれらのすべてのための1つの関数にjavascriptを保ちたいと思います。

Answer 1

あなたは両方のselect要素に重複する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; 
}; 

`