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] %}
			<label for="select-one">{{ product.options[0] }}</label>
			<select id="select-one" onchange="letsDoThis()">
				{% for value in product.options_with_values[0].values %}
					<option value="{{ value }}" {% if product.options_with_values[0].selected_value == value %}selected{% endif %}>
						{{ value }}
					</option>
				{% endfor %}
			</select>
		{% endif %}
		{% if product.options[1] %}
			<label for="select-two">{{ product.options[1] }}</label>
			<select id="select-two" onchange="letsDoThis()">
				{% for value in product.options_with_values[1].values %}
					<option value="{{ value }}" {% if product.options_with_values[1].selected_value == value %}selected{% endif %}>
						{{ value }}
					</option>
				{% endfor %}
			</select>
		{% endif %}
		{% if product.options[2] %}
			<label for="select-three">{{ product.options[2] }}</label>
			<select id="select-three" onchange="letsDoThis()">
				{% for value in product.options_with_values[2].values %}
					<option value="{{ value }}" {% if product.options_with_values[2].selected_value == value %}selected{% endif %}>
						{{ value }}
					</option>
				{% endfor %}
			</select>
		{% endif %}
	{% endif %}
	<select name="id" id="product-select">
		{% for variant in product.variants %}
			<option
				{% if variant == current_variant %}selected="selected"{% endif %}
				{% unless variant.available %}disabled="disabled"{% endunless %}
				value="{{ variant.id }}">
				{{ variant.title }}
			</option>
		{% endfor %}
	</select>				
</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 == '') {
			// Variant Not Found / Unavailable
			document.getElementById('product-select').value = '';
			document.getElementById('price').innerHTML = 'Unavailable';
			history.pushState(null, null, '/products/{{ product.handle }}');
			// Disable Add To Cart Button Here
		} else if ($('#product-select option[value="' + id + '"]').prop('disabled') == true) {
			// Sold Out
			document.getElementById('product-select').value = id;
			document.getElementById('price').innerHTML = 'Sold Out';
			history.pushState(null, null, '/products/{{ product.handle }}?variant=' + id);
			// Disable Add To Cart Button Here			
		} else {
			document.getElementById('product-select').value = id;
			document.getElementById('price').innerHTML = price;
			history.pushState(null, null, '/products/{{ product.handle }}?variant=' + id);
			// Enable Add To Cart Button Here
		}		
	}
</script>

Hello,

Your piece of code doesn't work ^^

He don't check if the variant are available or not.