How to get value of selected variant?

Highlighted
New Member
1 0 0

Hi all!

 

I'm trying to get the value of the selected option of a variant so I can display an image underneath the select dropdown when someone chooses a certain variation. There are 4 options in this variation selection and each has their own picture to display. 

 

I'm thinking to use jquery and update the inner-html of a div under the select drop-down when someone chooses an option.

 

I'm trying to fire the jquery function by adding the onclick attribute to the option like this:
{% for option in product.options_with_values %}
	{% if option.name == "Frame Type" %}
                    <div class="selector-wrapper js product-form__item">
                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                      {% for value in option.values %}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %} onclick="setFrametype({{ option.selected_value }})">{{ value }}</option>
                      {% endfor %}
                    </select>
                  </div>
	{% endif %}
{% endfor %}
But the selected attribute doesn't change when a different option is chosen, I can see with devtools that the first option still has the selected attribute. I think this doesn't update until you add to cart or something.
 
Any help you can give would be greatly appreciated. I'm probably off the mark with my strategy, so I'm open to other methodologies.
0 Likes