在 WooCommerce 中使用 Select2 的 SelectWoo 实例时遇到问题

Question

我在 WooCommerce 中的一些自定义区域中使用 Select2，我使用一些代码来添加和删除某些类，它工作正常，除了 WooCommerce 本身使用的 SelectWoo 实例不使用

 添加类el.addClass('has-selection');

在提供的示例中。

示例代码：

(function($) {
     $('select').each(function(e) {
        handleSelectSelections($(this));
    });
})( jQuery );

function handleSelectSelections(select) {
    var el = (select.next('.select2').length) ? jQuery(select.data('select2').$container) : select;

    if (select.val() !== "" && select.val() !== null) {
        el.addClass('has-selection');
    } else {
        el.removeClass('has-selection');
    }
}

一切正常，除了当它到达添加类的实际部分时它不起作用 - 没有添加类。

我在这里遗漏了什么吗？

Answer 1

可能是

if (select.val() !== "" && select.val() !== null) {
    **el.className += 'has-selection';**
} else {
    el.removeClass('has-selection');
}

Answer 2

(function($) {
    $(document).on('change', 'select', function() {
        handleSelectSelections($(this));
    });

    $(document).on('select2:select', 'select', function() {
        handleSelectSelections($(this));
    });

    $(document).on('select2:unselect', 'select', function() {
        handleSelectSelections($(this));
    });

    // Initially handle the selections on page load
    $('select').each(function() {
        handleSelectSelections($(this));
    });
})(jQuery);

function handleSelectSelections(select) {
    var el = select.next('.select2-container');

    if (select.val() !== null && select.val().length > 0) {
        el.addClass('has-selection');
    } else {
        el.removeClass('has-selection');
    }
}