Woocommerce 在自定义字段中选择“点击时自动关闭”

我正在尝试在WooCommerce 3.1.0的产品管理中使用Select2 4.0

我在变体中添加了一个名为“颜色组”的自定义字段，如下所示：

add_action( 'woocommerce_variation_options', 'add_to_variations_metabox', 10, 3 );
function add_to_variations_metabox( $loop, $variation_data, $variation ) {

    <div>
        <p class="form-row">
            <label for="dipi_color_groups<?php echo $loop; ?>"><?php echo __( 'Color Groups', 'dipi' ); ?></label>
                <select multiple="true" id="dipi_color_groups<?php echo $loop; ?>" class="color_groups" name="dipi_color_groups[<?php echo $loop; ?>]">
                    <option>Red</option>
                    <option>Green</option>
                    <option>Blue</option>
                    <option>Beige</option>
                </select>
        </p>
    </div> <?php 
}

该字段显示得很好

但当我点击它时，Select2会自动取消焦点/关闭。我认为这与WooCommerce对Select2的处理有冲突，但我不知道如何在WC edit产品中复制它们的功能

---

怎么回事？非常感谢您的帮助

我明白了。问题在于我的单击事件附加到任何单个包装容器。单击Select2时，

.woocommerce\u变体

单击事件将触发并重置Select2自动失去焦点

因此，我将click事件的范围限定为变体标题

，并且仅在关闭时。此外，我还检查Select2是否已经应用，以避免浪费资源或重置元素

$( '#variable_product_options_inner' ).on( 'click', '.woocommerce_variation.closed h3', function( e ) {

    // get current ddl
    $ddl = $( "select.color_groups", $( this ).parent() );

    // already a select2?
    if ( $ddl.hasClass("select2-hidden-accessible" ) ) return; // get out...

    // select2-ify dropdown
    $ddl.select2({
        tags: true,
        placeholder: "Add color groups...",
        width: "100%",
        createTag: function ( params ) {
            return {
                id: params.term,
                text: params.term,
                newOption: true
            }
        }
    });

});

$( '#variable_product_options_inner' ).on( 'click', '.woocommerce_variation.closed h3', function( e ) {

    // get current ddl
    $ddl = $( "select.color_groups", $( this ).parent() );

    // already a select2?
    if ( $ddl.hasClass("select2-hidden-accessible" ) ) return; // get out...

    // select2-ify dropdown
    $ddl.select2({
        tags: true,
        placeholder: "Add color groups...",
        width: "100%",
        createTag: function ( params ) {
            return {
                id: params.term,
                text: params.term,
                newOption: true
            }
        }
    });

});