CODEWITHSUNDEEP
javascriptcssdrop-down-menumsdropdown
webman
webman

Reputation: 1

Dropdown change image on selection

and thank you in advance

I am working within a custom ecommerce CMS where the values of the option are unique and are needed to carry through the ordering process to define the item.

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

I would like the selection to change-image in separate div.

i have been able to this with the msDropdown script, but it is from 2009 and the functionality seems limited and outdated. I do not want to use the way.

i have also seen ways to do this where the value is the img and the onchange="$" changes the value.

I was thinking the easiest way to do this could be done by maybe changing the bg img via a combination of css and js.

or by setting the specific value = img src.

But, i am not sure how to do this as my custom scripting experience is limited.

Any help here would be greatly appreciated, This is my first question on this account, but I have been a member of the stackflow community for many years. Thanks again

Upvotes: 0

Views: 142

Answers (2)

bru02
bru02

Reputation: 360

You can't have 2 elements with the same so I changed id to class at the dropdown
and added an onchange event to the select, that triggers a function called changeImg.
As far as i understand this should work.

Upvotes: 0

Sreekanth Reddy Balne
Sreekanth Reddy Balne

Reputation: 3424

You can't use an id multiple times. id is meant to be unique to an element.

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

Upvotes: 1

Related Questions