CODEWITHSUNDEEP
phpjavascript
Vince P
Vince P

Reputation: 1791

Change image on dropdown

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>

Upvotes: 0

Views: 1117

Answers (2)

Nick Beranek
Nick Beranek

Reputation: 2751

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;
});

Upvotes: 1

Tom
Tom

Reputation: 4180

the below code will alert the selected value (not the text, the value) on the onchange event

function selectOnchange(slt) {
    alert(slt.value);
}

<select onchange="selectOnchange(this)"></select>

this might help you out

Upvotes: 0

Related Questions