Much simpler version of Shopify's option_selection.js for separating product options into their own dropdown menus.

Much much simpler option selector for Shopify

<form action="/cart/add" method="post">
  {% if product.variants.size > 1 %}
		{% if product.options[0] %}
			{% assign used = '' %}
			<label for="select-one">{{ product.options[0] }}</label>
			<select id='select-one' onchange="letsDoThis()">
				{% for variant in product.variants %}
					{% unless used contains variant.option1 %}
						<option value="{{ variant.option1 }}">{{ variant.option1 }}</option>
						{% capture used %}{{ used }} {{ variant.option1 }}{% endcapture %}
					{% endunless %}
				{% endfor %}
			</select>
		{% endif %}
		{% if product.options[1] %}
			{% assign used = '' %}
			<label for="select-one">{{ product.options[1] }}</label>
			<select id='select-two' onchange="letsDoThis()">
				{% for variant in product.variants %}
					{% unless used contains variant.option2 %}
						<option value="{{ variant.option2 }}">{{ variant.option2 }}</option>
						{% capture used %}{{ used }} {{ variant.option2 }}{% endcapture %}
					{% endunless %}
				{% endfor %}
			</select>
		{% endif %}
		{% if product.options[2] %}
			{% assign used = '' %}
			<label for="select-one">{{ product.options[2] }}</label>
			<select id='select-three' onchange="letsDoThis()">
				{% for variant in product.variants %}
					{% unless used contains variant.option3 %}
						<option value="{{ variant.option3 }}">{{ variant.option3 }}</option>
						{% capture used %}{{ used }} {{ variant.option3 }}{% endcapture %}
					{% endunless %}
				{% endfor %}
			</select>
		{% endif %}
	{% endif %}
	<input type="hidden"name="id" id="product-select" value="{{ product.variants.first.id }}" />				
</form>

<script>
	function letsDoThis() {
		{% if product.options[0] %}var opt1 = document.getElementById('select-one').value;{% endif %}
		{% if product.options[1] %}var opt2 = document.getElementById('select-two').value;{% endif %}
		{% if product.options[2] %}var opt3 = document.getElementById('select-three').value;{% endif %}
		var id = '';
		{% for v in product.variants %}
		if(opt1=="{{ v.option1 }}"{% if product.options[1] %} && opt2=="{{ v.option2 }}"{% endif %}{% if product.options[2] %} && opt3=="{{ v.option3 }}"{% endif %}) {
				var id = {{ v.id }};
				var price = "{{ v.price | money }}";
			}
		{% endfor %}
		if(id!='') {
			document.getElementById('product-select').value = id;
			document.getElementById('price').innerHTML = price;
		} else {
			document.getElementById('product-select').value = '';
			document.getElementById('price').innerHTML = 'Unavailable';
		}
		
	}
</script>

Dear Zakhardage

Thank you very much for providing this alternative. I've been constructing a product quick-view lightbox from scratch and trying to decipher what was going on behind options_selection.js was becoming a headache.

how can i add variants options in related product & on add to cart. It shows them in cart ....

Really nice code Zak :D Thanks! Hey do you think maybe I could help you implement a code for linked options? How would you like to add that to the code?

Hey I had variant options 'XS' and 'S', so your current used implementation wasn't displaying 'S' because 'XS' came first.
To fix this I replaced line 8,20 and 32 with this (change the option numbers though):

{% assign usedSplit = used | split: " " %}
  {% unless usedSplit contains variant.option1 %}

This is so great. Helped a lot in a recent project. Created my own color selector radio buttons so using this was way more flexible. Currently working on pushing a version with the radio button selection as an variant option. Thanks!

Anyway to turn this into a radio button instead of having a dropdown?

This doesn't seem to check inventory availability with multiple variant options.

This doesn't seem to check inventory availability with multiple variant options.

What this doesn't do is a lot.

This doesn't seem to check inventory availability with multiple variant options.

What this doesn't do is a lot.

What? Just wanted to comment because I used this method, but realized that it was allowing customers to choose sold out options. Unavailable options (where the variant doesn't exist given the options selections) works fine. I just modified the code a little bit to enable letsDoThis() to check for variant availability.

Edit: If anyone is interested to see what I did, view my fork here.

This is so great. Helped a lot in a recent project.