Spree Dropdown boxes for variant option values
<p>I'm learning Spree 3.0 and I have a setup a test shop that sells shorts.</p>

<p>Shorts has multiple option types: Size, Color, Length</p>

<p>I wanted to change the way it displays the variant options on the frontend from a radio checkbox to a drop down box.</p>

<p>Currently, Spree displays the option types as radio buttons:</p>

<p><a href="https://i.stack.imgur.com/6GI0U.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6GI0U.png" alt="Current Spree setup"></a></p>

<p>I want to change this to use drop down menus for each option type, like this:</p>

<p><a href="https://i.stack.imgur.com/r01Dw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/r01Dw.png" alt="What I want Spree to do"></a></p>

<p>I've tried the following:</p>

<pre><code>&lt;%= select_tag "variant_id", options_for_select(@product.variants_and_option_values(current_currency).collect{ |v| ["#{variant_options(v)}  #{variant_price(v)}", v.id] })%&gt;
</code></pre>

<p>But it simply displays the values of all option types in each tag:</p>

<p><a href="https://i.stack.imgur.com/xpe4v.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xpe4v.png" alt="Dropdown with all the option types 1"></a></p>

<p><a href="https://i.stack.imgur.com/CEoxl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CEoxl.png" alt="Dropdown with all the option types 2"></a></p>

<p>I wanted to know the best way to split the option values into individual dropdown menus?</p>

<p>Any assistance is my much appreciated, thank you.</p>