Javascript text link onClick to select dropdown option value (onChange?)
I have a select box on a Wordpress Woo-commerce single product page which,
when a colour option is selected, changes the main image and displays an
add-to-cart button to purchase that particular variation.
I'm building a colour swatch feature which at the moment selects an option
from the dropdown via a text link's onClick event, but it simply displays
the new option in the select box and doesn't load the new image or
actually change the variation that is selected to be able to purchase.
HTML:
<select id="pa_colour" name="attribute_pa_colour">
<option value="">Choose colour…</option>
<option value="beige" selected="selected" class="active">Beige</option>
<option value="black" class="active">Black</option>
<option value="blue" class="active">Blue</option>
<option value="brown" class="active">Brown</option>
</select>
<a class="swatch" id="s-black" href="#"
onClick="document.getElementById('pa_colour').value='black'">Black</a>
Could this be achieved with an onChange applied to the select box to
properly select the option? jQuery is loaded onto the site so that will be
fine also. I don't know if it helps here but the jsfiddle is:
http://jsfiddle.net/p36fV/ .
Any help is appreciated, and please let me know if I've been unclear. Thanks.
No comments:
Post a Comment