选择时下拉更改图像

Question

预先谢谢你

我是在一个定制的电子商务CMS中工作的，其中选项的值是唯一的，并且需要执行订购过程来定义项目。

<div id="dropdown">
<select name="webmenu" id="webmenu">
<option value="4727c31d-8813-4921-9c2e-320d39e2a8dd" id="bigImg1">Option 1</option>
<option value="916607ea-b0f6-4553-887c-d02a16ac4fcd" id="bigImg2" >Option 2</option>
<option value="a4a5fdab-86a0-4c3f-acbd-0a9a747698dc" id="bigImg3">Option 3</option>
</select>
</div>


<div id="image">
<img src="#" class="imagechange">
</div>

<img id="bigImg1" src="https://lh4.ggpht.com/zQIXMNP87brRkMSRRiALQkgF-JRQeBW5vMgqwUt3xMwKw3yeZeZyH1GU6lzXNbDBuRM=w300">
<img id="bigImg2" src="https://lh3.googleusercontent.com/62kbzMH6YNZKg1eAbgDNZzPe3UyP86_CovtA14fSNsFXoCBi3RYzLPegjHRwiMyF7Q=w300">
<img id="bigImg3" src="https://demos.algorithmia.com/colorize-photos/public/images/yosemite.png">

我希望选择改变-图像在单独的div。

我已经能够在msDropdown脚本中做到这一点，但是它是从2009年开始的，而且功能似乎是有限的和过时的。我不想用这种方式。

我还看到了这样做的方法，其中的值是img，而onchange="$“改变了值。

我认为最简单的方法是通过css和js的组合来改变bg img。

或者通过设置特定值= img src。

但是，我不知道如何做到这一点，因为我的自定义脚本经验是有限的。

这里的任何帮助都将不胜感激，这是我在这个问题上的第一个问题，但多年来我一直是stackflow社区的一员。再次感谢

Answer 1

您不能多次使用id。id意味着一个元素是唯一的。

​

var image = document.querySelector('#image img');
document.getElementById('webmenu').onchange = function(){
  image.src=document.getElementById(this.options[this.selectedIndex].getAttribute('data-img')).src;
}

<div id="dropdown">
<select name="webmenu" id="webmenu">
<option value="4727c31d-8813-4921-9c2e-320d39e2a8dd" data-img="bigImg1">Option 1</option>
<option value="916607ea-b0f6-4553-887c-d02a16ac4fcd" data-img="bigImg2" >Option 2</option>
<option value="a4a5fdab-86a0-4c3f-acbd-0a9a747698dc" data-img="bigImg3">Option 3</option>
</select>
</div>


<div id="image">
<img src="#" class="imagechange">
</div>

<img id="bigImg1" src="https://lh4.ggpht.com/zQIXMNP87brRkMSRRiALQkgF-JRQeBW5vMgqwUt3xMwKw3yeZeZyH1GU6lzXNbDBuRM=w300">
<img id="bigImg2" src="https://lh3.googleusercontent.com/62kbzMH6YNZKg1eAbgDNZzPe3UyP86_CovtA14fSNsFXoCBi3RYzLPegjHRwiMyF7Q=w300">
<img id="bigImg3" src="https://demos.algorithmia.com/colorize-photos/public/images/yosemite.png">

​

Answer 2

不能有两个相同的元素，所以我在下拉列表中将id更改为class

并将一个onchange事件添加到select中，该事件触发一个名为changeImg的函数。

据我所知，这应该能工作。