asked on

Change div when dropdown changes

I have a dropdown which displays colours for clothing garments. When a colour is selected I would like it so that a div changes to show the image applicable to that colour.

I need it so that a different div is changed on each selection, so for example if the first selection is selected then a div called div_img1 is shown, if the second is selected then a div called div_img2 is shown. I would also need to hide the toggled divs as well.

The selections in the menu won't always have an image to change to so this needs to be beared in my mind too.

And finally, the options in the select dropdown already have a value which will be the same as the colour to select, but the divs that change need to have the same name, such as div_img1, div_img2, etc.

Any ideas?

Thanks

Chris

Michel Plungjan

Like this

var saveDiv = "";
function changeDiv(sel) {
  if (saveDiv) document.getElementById('div_'+saveDiv).display='none';
  var val = sel.options[sel.selectedIndex].value
  if (val) document.getElementById('div_'+val).display='';
  saveDiv = val;
}
window.onload=function() {
  changeDiv(document.getElementById('sel1')); // make sure we can handle a reload
}
 
.
.
<select id="sel1" onChange="changeDiv(this)">
<option value="">Please select</option>
<option value="img1">Bla bla</option>
</select>
 
<div id="div_img1">Bla bla</div>

Open in new window

djfenom

ASKER

Many thanks for this, however it doesn't appear to work, I'm not getting an error, it's just not doing anything?

Also, is it possible to pick up the ID of the option rather than the value as the values are different from page to page and this way I can keep the div id's the same.

Thanks

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial