下拉選擇時更改圖像

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

您不能有2個元素相同，所以我在下拉菜單中將id更改為class
並向select添加了onchange事件，該事件觸發了一個名為changeImg的函數。
據我了解， 這應該工作。