從兩個下拉菜單顯示圖像

Question

由於我有限的編碼知識，在這里碰到了點磚牆。

我有一個下拉菜單，可以在選擇后顯示圖像，這一切都很好。 如何添加第二個下拉列表和相應的圖像，而下拉列表彼此之間不會互相干擾？

理想情況下，我希望最終並排放置兩個下拉框-每個下拉框都從同一組圖像變量中讀取-然后在它們下方並排放置兩個圖像。

這是單個工作代碼的代碼； 頭包含：

var linkData = [
  ['http://i.imgur.com/4ECkKqG.png'],
  ['http://i.imgur.com/98zZKAm.png'],
]
  //preload the pics
  var picO = new Array();
  for(i=0; i < linkData.length; i++){
  picO[i] = new Image();
  picO[i].src = linkData[i][0];
}

function show(val) {
  document.getElementById('picture').src = picO[val-1].src;
}
window.onload=function(){
  show(1);
}

身體

 <div> <select onchange="show(this.value);"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <br/> <a><img id="picture" src="" /></a> </div> 

Answer 1

我真的不知道這是否是您要執行的操作，但我讓您弄不清代碼。 希望是美好的。

這是小提琴 。

代碼是這樣的：

 function select1() { var img = document.getElementById("image1"); img.src = this.value; return false; } document.getElementById("select1").onchange = select1; function select2() { var img = document.getElementById("image2"); img.src = this.value; return false; } document.getElementById("select2").onchange = select2; 

 <img id="image1" src="http://i.imgur.com/4ECkKqG.png" /> <select id="select1"> <option value="http://i.imgur.com/4ECkKqG.png">Img 1</option> <option value="http://i.imgur.com/98zZKAm.png">Img2</option> </select> <br> <img id="image2" src="http://i.imgur.com/4ECkKqG.png" /> <select id="select2"> <option value="http://i.imgur.com/4ECkKqG.png">Img 1</option> <option value="http://i.imgur.com/98zZKAm.png">Img2</option> </select> 

Answer 2

首先，使用picO數組和new Image()創建new Image()並將它們存儲在此數組中是沒有用的，只需將其刪除，然后使用傳遞當前下拉列表和目標img的id的函數，然后在每個選擇更改事件上調用它。

這是一個工作片段：

 var linkData = [ ['http://i.imgur.com/4ECkKqG.png'], ['http://i.imgur.com/98zZKAm.png'], ] function changeImage(select, id) { var img = document.getElementById(id); img.src = linkData[(select.value) - 1][0]; return false; } 

 <select id="select1" onchange="changeImage(this, 'image1')"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select><br/> <img id="image1" src="http://i.imgur.com/4ECkKqG.png" /> <br> <select id="select2" onchange="changeImage(this, 'image2')"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select><br/> <img id="image2" src="http://i.imgur.com/4ECkKqG.png" />