选择时下拉更改图像答案

【问题标题】：Dropdown change image on selection选择时下拉更改图像
【发布时间】：2018-02-21 18:51:25
【问题描述】：

提前谢谢你

我在一个自定义电子商务 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 社区的成员。再次感谢

【问题讨论】：

如果需要任何其他信息，我会尽快回复

标签： javascript css drop-down-menu msdropdown

【解决方案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">

【讨论】：

太好了，非常感谢！！！是的，我的意思是表明，这就是我希望 id img 相等的。应该把它放到css中。当我在这里运行 sn-p 时，imgs 会发生变化，但其他图像仍会出现在其下方，这些图像在未选择时是否可以隐藏？再次感谢
我只是设置了 display: none 就可以了。你最好的！

【解决方案2】：

你不能有两个相同的元素我在下拉列表中将id 更改为class
，并向select 添加了一个onchange 事件，该事件触发了一个名为changeImg 的函数。
据我所理解 this 应该可以工作。

【讨论】：