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

我真的不知道这是不是你打算做的，但是我让你成了代码的小提琴。希望很好。

这是fiddle。

代码是这样的：

＆＃13;

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;

＆＃13;

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

＆＃13;

Answer 2

首先使用picO数组和new Image()来创建新的图像并将它们存储在这个数组中是没用的只是摆脱它，然后只使用一个函数，你传递当前的下拉列表和目标id的{{1}}，并在每次选择更改事件时调用它。

这是一个有效的片段：

img

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;
}

显示两个下拉菜单中的图像

2 个答案: