Изменение варианта продукта Woocommerce с помощью jQuery после нажатия на автономную кнопку

Question

У меня есть всплывающее окно на странице продукта в Woocommerce с изображениями вариантов и отдельными кнопками для каждого варианта.Я хочу изменить вариант после того, как пользователь нажмет определенную кнопку.

Я пытался добавить с выбранным параметром jQuery, но он не обновляет данные варианта, просто обновляет ввод выбора.

Когда я смотрюФорма в DevTools после изменения варианта с помощью классического выбора ничего не меняет в самой форме.

Я также пытался изменить значение Select с помощью jQuery, но оно совсем не работает:

jQuery('#choose-berlin').click(function() {

        jQuery('#city').val("Berlin").change();

    });

Структура выбора:

<select id="city" class="" name="attribute_city" data-attribute_name="attribute_city" data-show_option_none="yes">
<option value="">Choose option</option>
<option value="Berlin" class="attached enabled">Berlin</option>
<option value="London" class="attached enabled">London</option>
</select>

Одна из кнопок ввсплывающее окно:

<a href="#" role="button" id="choose-berlin">
    Choose Berlin
</a>

Как правильно вызвать изменение варианта?

Answer 1

Попробуйте вместо этого:

jQuery('#choose-berlin').click(function() {
        jQuery('#city').val("Berlin").trigger('change');
});

Предполагается, что вы добавили город в качестве атрибута в форму .variations_form.

В Woocommerce имеется множество базовых функциональных возможностей с полями вариантов, в которых есть прослушиватели действий на change и ряд других пользовательских событий. Если вы изменили поле выбора с помощью JS, вам нужно убедиться, что вы инициировали действие изменения для выбора.