Question

I have a dropdown option box in my CS-Cart install that has dynamically created values, e.g. 3110, 3111, 3112, 3113….

I need to change an image below the dropdown based on the chose value from the dropdown.

I was looking at this script – http://www.javascriptkit.com/script/cut173.shtml but using that would depend on using manually created values. (see below for coding)

Script:

<script language="javascript">
<!--
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>

HTML:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p>
<select name="picture" size="1" onChange="showimage()">
<option selected value="image1.gif">Picture of me</option>
<option value="image2.gif">Picture of my aunt</option>
<option value="image3.gif">Picture of my brother</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="image1.gif" name="pictures" width="99" height="100"></td>
</tr>
</table>

What do I need to do so it references the value in the dropdown? this Is for a one off product and only needs to be done for this one so there is no worries about values changing etc…

This is the code that is generated on the front end of the page that I need to associate the scripting to:

<select name="product_data[29821][product_options][742]" id="option_29821_742" onchange="fn_change_options('29821', '29821', '742');" >
<option value="">Choose...</option>                                                                     <option value="3111" >LC </option>
<option value="3110" >LC/A </option>
<option value="3112" >E2000 </option>
<option value="3113" >E2/A </option>
<option value="3114" >FC /option>
<option value="3115" >FC/A </option>
<option value="3116" >ST </option>
<option value="3117" >SC </option>
<option value="3118" >SC/A </option>
</select>

Answer 1

Here’s what you need to do:

function listen(event, elem, func) {
  if (elem.addEventListener) {
    elem.addEventListener(event, func, false);
  } else if (elem.attachEvent) {
    elem.attachEvent(event, func);
  }
}

var select = document.getElementById('picture'); // give your select element an ID for ease and speed of DOM traversal

listen('change', select, function() {
  var val = this.options[this.selectedIndex].value;
  var image = new Image();
  image.src = val;
});