显示来自两个下拉菜单的图像

Question

运行由于我有限的编码知识，这里有点像砖墙。

我有一个下拉菜单，可以在选择时显示图像，这很好。如何添加第二个下拉菜单和相应的图像，而不让下拉菜单相互馈送 into/interfering？

理想情况下，我希望并排放置两个下拉框 - 每个下拉框都从同一组图像变量中读取 - 然后在它们下方并排放置两个图像。

这是单个工作代码；头部包含：

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

我真的不知道这是否是你想要做的，但我用代码给你做了 fiddle。希望是好的。

这里是 fiddle.

代码是这样的：

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() 创建新图像并将它们存储在这个数组中是无用的，只是摆脱它，然后只使用一个函数，你传递当前下拉列表和目标 img 的 id，并在每个 select 更改事件上调用它。

这是一个工作片段：

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" />

显示来自两个下拉菜单的图像

Display images from two dropdown menus

html

javascript

css

jquery

html-select