[jQuery] Selecting option of select with different ID using same code
Please take a look on example code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#imageShowcase img").hide();
jQuery("#productImgDefault").show();
jQuery("#colorSelector").change(function() {
// Hide all images on slect element change action
jQuery("#imageShowcase img").hide();
// Get the value of selected option
var optionValue = jQuery(this).attr('value');
// Just a test to see if you're getting option value
// alert(optionValue);
// Get the content (aka inner HTML) of selected option
var optionValueText = jQuery.trim(jQuery('#colorSelector dl
dd.last select :selected').text());
// Just a test to see if you're getting right selected option
inner text
// alert(optionValueText);
//alert('Selected option has value: ' + optionValue + ' and
inner text: ' + optionValueText);
// Show the image based on selected value
jQuery("#productImg" + optionValueText).show();
});
});
</script>
<div id="colorSelector">
<dl>
<dt><label>Color Group<span class="required"> *</span></
label></dt>
<dd class="last">
<select name="options[8]" id="select_8" class=" required-entry
product-custom-option" title="">
<option value="">-Select-</option>
<option value="30">Blue </option>
<option value="31">Blue-Green </option>
<option value="32">Green </option>
<option value="42">Grey-Black </option>
<option value="29">Pink-Purple </option>
<option value="28">Red </option>
<option value="41">White </option>
<option value="27">Yellow-Brown </option>
</select>
</dd>
</dl>
</div>
<div id="imageShowcase" style="text-align:left;">
<img id="productImgDefault" src="color-hex.gif" title="Blue image"
alt="image missing" />
<img id="productImg-Select-" src="color-hex.gif" title="Blue
image" alt="image missing" />
<img id="productImgBlue" src="blue.gif" title="Blue image" alt=""
style="display:none;" />
<img id="productImgBlue-Green" src="blue-green.gif" title="Blue-
Green image" alt="" style="display:none;" />
<img id="productImgGreen" src="green.gif" title="Yellow image"
alt="" style="display:none;" />
<img id="productImgGrey-Black" src="grey-black.gif" title="Yellow
image" alt="" style="display:none;" />
<img id="productImgPink-Purple" src="pink-purple.gif"
title="Yellow image" alt="" style="display:none;" />
<img id="productImgRed" src="red.gif" title="Yellow image" alt=""
style="display:none;" />
<img id="productImgWhite" src="white.gif" title="Yellow image"
alt="" style="display:none;" />
<img id="productImgYellow-Brown" src="yellow-brown.gif"
title="Yellow image" alt="" style="display:none;" />
</div>
This code changes image depending on the option selected in select.
I'm using very long code without ID used to get select option (aka
#colorSelector dl dd.last select) because code used on Magento and it
assigned for each select different ID and name.
My question is. It that possible to make code to change images in the
same way, but using link like:
<a href="#" onclick="???">select option with Blue text</a>
Thanks for help!