点击自主按钮后，使用jQuery更改Woocommerce产品变体

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中有许多底层功能，其中的variation字段在change和其他几个自定义事件上具有操作侦听器。如果使用JS更改选择字段，则需要确保在选择上触发更改操作。