问题描述

在 woocommerce开发中，可变产品存在多个select，而其中一个可变选项（color），已经使用 YITH WooCommerce Color and Label Variations插件更改为单选框，且原生select已经被隐藏。但是被隐藏的select还是被Select2给转义了，导致多出来一个下拉框。

解决方法

先来看 Select2初始化代码：

jQuery(document).ready(function(e) {
    e.each(e(".single-product select[data-attribute_name], .single-product .wc-pao-addon-select"), function(t, n) {
        e(n).select2({
            minimumResultsForSearch: -1,
            dropdownParent: e(n).closest(".summary.entry-summary")
        })
    })
});

通过代码可以看到是使用属性选择器来选择并循环进行初始化的。这时候就没必要去考虑什么not选择器之类的东西了，直接在循环中加判断即可。因为 YITH WooCommerce Color and Label Variations插件会给它修改过的select赋予一个单独的ClassName。代码如下：

jQuery(document).ready(function(e) {
    e.each(e(".single-product select[data-attribute_name], .single-product .wc-pao-addon-select"), function(t, n) {
        if ( ! n.hasClass('yith_wccl_custom') ) {//当Class不包含 yith_wccl_custom 的时候，才进行初始化
            e(n).select2({
                minimumResultsForSearch: -1,
                dropdownParent: e(n).closest(".summary.entry-summary")
            })
        }
    })
});