WooCommerce - 使用自定义选择框触发变化选择答案

【问题标题】：WooCommerce - Triggering variation select with custom select boxesWooCommerce - 使用自定义选择框触发变化选择
【发布时间】：2016-01-28 11:03:53
【问题描述】：

我正在尝试使用 FancySelect.js 来设置 WooCommerce 上使用的选择框的样式，并且已经管理了一些，但我在产品页面上的变体表单方面遇到了困难。

虽然 FancySelect 在原始选择框上触发了一个更改事件，但它似乎没有任何影响。查看变体表单中使用的 javascript，看起来他们已经取消绑定选择框上的更改事件并以其他方式处理它，而是通过触发 .variations_form 上的事件。不过，我似乎无法让它工作。

我的代码是这样的：

        $('.summary select').fancySelect().on('change.fs', function() {
            $(this).trigger('change.$');
            $('.variations_form').trigger('woocommerce_variation_select_change');
        });

我尝试触发多个事件，但似乎没有任何影响。

有什么想法吗？谢谢。

【问题讨论】：

试试这个...检查浏览器上的fancyselect元素。寻找选择元素...检查时使用开发工具调整css。让它可见..然后尝试更改fancyselect的值..查看原始选择是否更改了值...
是的，它确实改变了选择值，但它不会触发变化的变化。但是，如果我随后手动更改实际的选择字段，它确实如此。所以我认为改变选择（可能是点击）会触发其他东西，比如.variations_form。
尝试触发点击...
是的，我也尝试过 :) 但是，在修补时，我想我想通了。将作为未来开发人员的答案发布。谢谢。

标签： javascript jquery wordpress woocommerce

【解决方案1】：

所以原来的触发器不起作用，原因我无法完全解决。但是，在原始选择框上手动触发更改事件在一定程度上起作用，但它不会更新 fancySelect 的“触发器”元素。我认为这是因为原始选择的选项没有获得:selected 属性（无论出于何种原因）。我不得不在 fancySelect 中添加一个自定义事件来手动触发它的 updateText() 方法。

更新代码：

$('.summary .options li').on('click', function(){
    $('.summary select').trigger('change').trigger('select.fs');
});

fancySelect 的附加活动（如果有机会，我会尽力参与）：

sel.on('select.fs', function(){
    updateTriggerText();
});

干杯。

【讨论】：