添加jQuery实现配送表单开关时的Select2渲染异常问题

问题根源 #

你的代码先默认隐藏了配送地址容器，紧接着触发复选框的change事件。如果复选框默认未勾选，配送地址会一直处于隐藏状态——而Select2需要在元素可见的前提下才能正确初始化，隐藏元素的尺寸无法被计算，导致对应的Select2 span标签无法生成。

修复方案 #

调整初始化逻辑，先根据复选框的初始状态决定容器的显示/隐藏状态，再绑定事件；同时在显示容器后手动重新初始化Select2，确保下拉框能正常渲染。

修改后的代码：

jQuery( function( $ ) {
    var wc_order_review_form = {
        $order_review: $( '#order_review' ),
        $shipCheckbox: $( '#ship-to-different-address input' ),
        $shippingAddress: $( 'div.shipping_address' ),
        
        init: function() {
            // 先根据复选框初始状态设置容器可见性
            this.setShippingVisibility();
            // 绑定change事件，用$.proxy确保this指向正确
            this.$order_review.on( 'change', '#ship-to-different-address input', $.proxy( this.ship_to_different_address, this ) );
        },
        
        setShippingVisibility: function() {
            if ( !this.$shipCheckbox.is( ':checked' ) ) {
                this.$shippingAddress.hide();
            } else {
                this.$shippingAddress.show();
                // 初始化可见状态下的Select2
                this.initSelect2();
            }
        },
        
        ship_to_different_address: function() {
            if ( this.$shipCheckbox.is( ':checked' ) ) {
                this.$shippingAddress.slideDown( 'fast', function() {
                    // 滑动动画完成后，确保元素可见再初始化Select2
                    wc_order_review_form.initSelect2();
                } );
            } else {
                this.$shippingAddress.slideUp();
            }
        },
        
        initSelect2: function() {
            // 只针对未初始化的下拉框执行Select2初始化
            this.$shippingAddress.find( 'select' ).each( function() {
                if ( !$( this ).hasClass( 'select2-hidden-accessible' ) ) {
                    $( this ).select2();
                }
            } );
        }
    };
    wc_order_review_form.init();
} );

代码说明 #

• 提前缓存DOM元素，避免重复查找DOM提升性能
• setShippingVisibility方法先处理初始状态，默认未勾选时隐藏容器，勾选时直接显示并初始化Select2
• 滑动显示完成后再初始化Select2，确保元素处于可见状态，Select2能正确计算尺寸生成标签
• initSelect2方法做了判断，只初始化未被Select2处理过的下拉框，避免重复初始化导致的异常

内容的提问来源于stack exchange，提问作者social.reza