Update Selected Variant on Option Change

[axwaxw]

Products in my store have a number of options, but not all options are available for all products.

For instance, there are 2 'fabric type' options, each of which has its own selection of color options.

If the customer selects a 'fabric type' and 'color', but then changes the 'fabric type', the selected variant does not automatically update and the selected option is displayed as crossed out (i.e. unavailable ) see screenshots below.

On change of and OPTION, I would like the VARIANT to update automatically to the first available VARIANT having all of the selected OPTIONS (unless the currently selected variant is still valid).

Can this be achieved through javascript / liquid?

The examples I have seen are triggered by change of VARIANT, but I want to trigger a VARIANT UPDATE on change of OPTION.

Thanks!

FABRIC TYPE AND COLOR SELECTED FIRST - AND VARIANT UPDATES

FABRIC TYPE OPTION UPDATED BY USER - BUT SELECTED VARIANT DOES NOT UPDATE AND COLOR OPTION IS DISPLAYED AS CROSSED-OUT (I.E. UNAVALABLE)

[shahrozbabar5]

@axwaxw Well, I understood why it is happening, it would need custom code, let me know if you are familiar with JavaScript or liquid. I can guide you here but if you are familiar with the code or will not mess up the whole theme. else I can fix this issue for you. let me know your response, so I can further answer

[axwaxw]

@shahrozbabar5 thanks - yes I am familiar with liquid and javascript.  I have tried various solutions that are triggered by a change in variant but I have not yet found a solution triggered by a change of option, nor am I able to find a way to get the currently selected options (only the currently selected variant).  Any assistance appreciated!