如何根据单选按钮选择更改下拉选择？

Question

我有shopify应用程序，用户可以在其中选择产品的不同变体。 我想根据单选按钮的选择更改产品下拉菜单，我的产品页面如下所示。

我想根据单选按钮的选择更改下拉值。

这是我的下拉代码：

auction.js

这是我的单选按钮代码

 <select name="id" id="ProductSelect-{{ section_id }}" class="product-single__variants no-js">
    {% for variant in product.variants %}
      {% if variant.available %}
        <option {% if variant == product.selected_or_first_available_variant %}
          selected="selected" {% endif %}
          value="{{ variant.id }}">
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {% else %}
        <option disabled="disabled">
          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
        </option>
      {% endif %}
    {% endfor %}

Answer 1

有多种解决方法，其中大多数涉及JavaScript。下面是两种不同的方法。

执行此操作的理想方法是一起删除<select>，然后使用Shopify Ajax API将商品添加到购物车。通过使用此方法，您可以直接从<radio>而不是<select>获取所选变体。

要做到这一点，一种骇人听闻的方法是将更改<select>的值后，将“选择可见性”设置为“隐藏”，并使用JavaScript设置<option>中选中的<radio>。