onclickの選択から名前のリストを作成

Question

複数の選択に基づいてアイテムのリストを作成したいと思います。 オプションの値から始まるイメージのURLを（オプションで選択すると）作成するコンボボックスがあります。

<span> 
<select id="menu1"> 
<option value="xx1" id="xx1">Name of selection 1</option> 
<option value="xx2" id="xx2">Name of selection 2</option> 
<option value="xx3" id="xx3">Name of selection 3</option> 
<option value="xx4" id="xx4">Name of selection 4</option> 
</select> 
</span> 

<span class="first"> 
<img id="scelta1" src="" alt="Prima Scelta"> 
</span> 

function setCard1() { 
var img = document.getElementById("scelta1"); 
img.src = 'immagini/collezionabili/' + this.value + '.png'; 
return false;} 
document.getElementById("menu1").onchange = setCard1; 

クリックすると画像の中から選択したものに基づいてリストを作成する必要があります。何かが好きです：imgをクリックし、リストの "スポット" 1にthis.valueを追加し、別のimgを選択し、this.valueを "spot" 2に追加します。 これをどうすれば実現できますか？

EDIT： ドロップダウンは3つあり、すべて同じようなものであり、それぞれについて同様の機能を備えています。 「スポット」それは私が配置する必要があり、テーブル内の行なので「this.value」への表のように：以下のコードでsetCard1機能を置き換え

<table id="mazzo"> 
<tr><td id="pick01">"first onclick choice here"</td></tr> 
<tr><td id="pick02">"second onclick choice here"</td></tr> 
<tr><td id="pick03">"third onclick choice here"</td></tr> 
<tr><td id="pick04">"forth first onclick choice here"</td></tr> 
</table> 

Answer 1

：

function setCard1() { 
var img = document.getElementById("scelta1"); 
img.src = 'immagini/collezionabili/' + this.value + '.png'; 


//**Change below line** 

var myTable=document.getElementById("tableBody"); 

var noOfChoices = myTable.rows.length+1; 
var selectedImage = "<tr><td id='pick'"+noOfChoices+">"+noOfChoices+" choice here</td></tr></tr>"; 
//Add a row to table 
myTable.append(selectedImage); 

return false;} 

変更あなたテーブルへ

<table id="mazzo"> 
<tbody id="tableBody"> 
<tr><td id="pick01">"first onclick choice here"</td></tr> 
<tr><td id="pick02">"second onclick choice here"</td></tr> 
<tr><td id="pick03">"third onclick choice here"</td></tr> 
<tr><td id="pick04">"forth first onclick choice here"</td></tr> 
</tbody> 
</table> 

以下のようにそして今