使用 jquery 从选择选项创建按钮时出现问题

Question

我正在使用 jquery 制作连接到我的选择下拉选项的按钮（目的是在这些选项起作用后隐藏下拉菜单），但循环似乎会迭代多次，并且只有第二组链接到下拉列表中正确的产品/变体。

这是当前结果：https://www.loom.com/share/37b187b6f24742ea8ef2413d590e5b71?sid=89f3d0e4-6880-4811-87e0-1eba187ae477

下拉菜单是用 html 和 Shopify Liquid 构建的

这是选择器的 html 和 Liquid

 <select id="product_card_selector" name="id" class="product-variant-select">
      {% for variant in card_product.variants %}
       {% if variant.available %}
        <option value="{{ variant.id }}">{{ variant.title }}</option>
       {% else %}
        <option disabled="disabled">{{ variant.title }} - Sold Out</option>
        {% endif %}
      {% endfor %}
  </select>

这是jquery

<script>
  $(function () {

  $('#product_card_selector').each(function (selectIndex, selectElement) {

    var select = $(selectElement);
    var container = $("<div class='radioSelectContainer' />");
    $( ".card-form" ).append(container);
    container.append(select);

    select.find('option').each(function (optionIndex, optionElement) {
      var jqEl = $(optionElement);
      var radioGroup = select.attr('id') + "Group";
      var label = $("<label />");
      container.append(label);

      $('<input type="radio" name="' + radioGroup + '" '+(jqEl.attr("disabled")?'disabled':'')+' />')
          .attr("value", jqEl.val())
          //.click((function () { select.val($(this).val()); })) //radio updates select - see optional below
          .appendTo(label);

      $("<span>" + jqEl.val() + "</span>").appendTo(label);
    });

   
//unchecking when clicking on an already checked radio
    container.find(":radio + span").mousedown(
      function (e) {
        var $span = $(this);
        var $radio = $($span.prev());
        if ($radio.attr("disabled")) return;
        if ($radio.is(':checked')) {
          var uncheck = function() {
            setTimeout(function () { $radio.prop('checked', false); }, 0);
          };
          var unbind = function() {
            $span.unbind('mouseup', up);
          };
          var up = function() {
            uncheck();
            unbind();
          };
          $span.bind('mouseup', up);
          $span.one('mouseout', unbind);
        } else {
          select.val($radio.val());
        }
      }
    );

    select.change((function () { //select updates radio
      $("input[name='" + select.attr('id') + "Group" + "'][value='" + this.value + "']").prop("checked", true);
    }));
  });
});

和CSS

<style>
.radioSelectContainer > select {
     /*display: none;*/
}
.radioSelectContainer > label {
    display: inline-block;
    margin: 0.3em 0.3em 0 0;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
}
.radioSelectContainer > label > span {
    padding:0.2em;
    text-align:center;
    display:block;
}
.radioSelectContainer > label > input {
    position:absolute;
    top:-20px;
}
.radioSelectContainer > label > input:checked + span {
    background-color:#404040;
    color:#F7F7F7;
}
</style>

见上文。我尝试了几种不同的方法来编写每个语句。