BucketFeet-Product.liquid

<--
    You need to add a select tag everywhere you loop through variants
    Basically, there has to be an option on the page for every variant
    You could loop through all of them at once and have one select tag but that might not work with the tabs / markup
-->

.
.
.
{% if has_men_sizes > 0 %}
  
  <--
      ADD A SELECT TAG WITH VARIANT OPTIONS
      - THE CLASS NAME IS ONLY USED AS A JS HOOK
      - ADD YOUR OWN STYLING CLASSES (I don't know the Slate CSS framework)
  -->
  
  <select class="size-select">
    {% for men in men_sizes %}
      {% assign variant = men | split: '|' %}
      <option value="{{ variant[1] }}" {% if variant[2] == 'false' %}disabled="disabled"{% endif %}>{{ variant[0] }}</option>
    {% endfor %}
  </select>
  
  <-- FINISH ADDING SELECT TAGS WITH VARIANT OPTIONS -->
  
  {% for men in men_sizes %}
    {% assign variant = men | split: '|' %}
    <li class="Radio--labelsContainer">
      <input {% if current_variant_id == variant[1] %}checked="checked"{% endif %} type="radio" name="id" value="{{ variant[1] }}" id="radio_{{ variant[1] }}" class="RadioLabels-input {% if variant[2] == 'false' %}RadioLabels-input--notAvailable{% endif %}" {% if variant[2] == 'false' %}disabled{% endif %}>
      <label for="radio_{{ variant[1] }}" class="RadioLabels-label">{{ variant[0] }}</label>
    </li>
  {% endfor %}
{% endif %}
.
.
.
<script type="text/javascript">

    var $radioInputs       = $('input[type="radio"]');
    var $sizeSelects       = $('select.size-select');
    var $sizeSelectOptions = $sizeSelects.find('option');

    /*
     * @this { jQuery element } - $input
     */
    function syncInputs(){
      var variant = $(this).val();
      var selector = '[value="' + variant + '"]';
      var $variantRadio  = $radioInputs.filter( selector );
      var $variantSelect = $sizeSelectOptions.filter( selector ).parent('select');

      $variantRadio.prop("checked", true);
      $variantSelect.val(variant);
    }

    $sizeSelects.on('change', syncInputs);
    $radioInputs.on('change', syncInputs);

</script>