如何根据其他选择字段的更改来更新选择字段？

Question

我正在尝试设置shopify功能，以允许我选择具有多个变体的产品。我遇到的问题是我需要编写一个jquery，当一个变体发生更改时，它将更新第一个选择字段（具有变体ID的那个）以匹配其他三个选择字段中的内容各个变体。

我尝试了在stackOverflow上找到的各种方法，但无济于事。没有什么比我需要的具体。

以下是液体代码：

<select name="quantity">
    {% for i in (1..10) %}
        <option value="{{i}}">Quantity: {{i}}</option>
    {% endfor %}
</select>

{% if product.variants.size > 1 %}

    {% assign count3 = 1 %}

    <label for="id" class=variant-label>
        {% for option in product.options %}
            {% if count3 == 2 or count3 == 3 %}/{% endif %} {{ option }}
            {% assign count3 = count3 | plus: 1 %}
        {% endfor %}
    </label>

    {% assign count4 = 1 %}

    <select name="id" class="variant no-js">
        {% for variant in product.variants %}
            {% if variant.available %}
                <option class="variant-option" id=gallery-image-{{ count4 }} value="{{ variant.id }}">
                    {{ variant.title }} - {{ variant.price | money }}
                </option>
            {% else %}
                <option id=gallery-image-{{ count4 }} value="0">{{ variant.title }} - Out of stock!</option>
            {% endif %}
            {% assign count4 = count4 | plus: 1 %}
        {% endfor %}
    </select>

    <input class=variant-target type="hidden" name="id" value="{{ product.variants.first.id }}" />

{% else %}

    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />

{% endif %}

{% for option in product.options_with_values %}
    <div class="selector-wrapper js product-form__item">
        <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
            {{ option.name }}
        </label>
        <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
            {% for value in option.values %}
                <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
            {% endfor %}
        </select>
    </div>
{% endfor %}

{% include 'product-message' %}


{% if product.variants.size > 1 %}

    {% if product.variants.first.available %}

        <input type="submit" value="Add to Cart" />

    {% else %}

        <input type="submit" value="Out of Stock" disabled="disabled" />

    {% endif %}

{% else %}

    {% if product.available %}

        <input type="submit" value="Add to Cart" />

    {% else %}

        <input type="submit" value="Out of Stock" disabled="disabled" />

    {% endif %}

{% endif %}

每当ID为#SingleOptionSelector {{number from 0-2}}的选择字段发生更改时，类别为.variant的选择字段就会更改，以匹配其他选择字段中的内容。

EG：变体选择字段是“大小”，“颜色”，“材料”，最初选择为1，红色，棉花。 #SingleOptionSelector选择字段最初具有1 /红色/棉。如果有人更新了“尺寸”，“颜色”或“材料”选择字段，则#SingleOptionSelector选择字段需要更新以匹配。

希望这一切都有道理！