Как обновить выбранные поля на основе других изменений выбранных полей?

Question

Я пытаюсь настроить функцию shopify, которая позволяет мне выбирать продукт с несколькими вариантами.Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно написать некоторый jquery, который, когда один из вариантов изменяется, обновляет первое поле выбора (поле с идентификатором варианта), чтобы соответствовать тому, что есть в трех других полях выбора сотдельные варианты.

Я пробовал различные методы, найденные в stackOverflow, но безрезультатно.Нет ничего более конкретного, чем то, что мне нужно.

Вот код Liquid:

<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 %}

Всякий раз, когда поле выбора с идентификатором: #SingleOptionSelector {{число здесь от 0-2}}, изменяется, поле выбора с классомИзменения: .variant соответствуют тем, что есть в других полях выбора.

EG: поля выбора варианта: Размер, Цвет, Материал и изначально выбраны как 1, Красный, Хлопок.Поле выбора #SingleOptionSelector изначально имеет значение 1 / Red / Cotton.Если кто-то обновляет поля выбора «Размер», «Цвет» или «Материал», необходимо обновить поле выбора #SingleOptionSelector.

Надеюсь, что все имеет смысл!