Javascript Woocommerce 2可变产品下拉列表，强制第一个始终显示所有选项

我的变量WooCommerce产品中有两个下拉选择字段

第一个是产品类型（在我的例子中是框架或非框架艺术品） 第二个是艺术品的尺寸

感谢：

当没有为每个下拉选择字段单独选择任何内容时，我可以显示默认文本

我现在的问题是，我需要强制第一个下拉列表始终显示所有选项，并且在进行选择时，重置第二个

例如：

我在第一个下拉列表中提供变体A、B、C、D。 第二个下拉列表将有变体1、2、3、4

假设我选择A，第二个下拉选择字段现在将选项限制为1和3，因为A不适用于2和4

假设我现在在第二个下拉选择字段中选择3，这会将第一个下拉选择字段的选择限制为A和B，因为C和D在3中不可用

但我需要在第一个例子中看到C和D，这样人们在选择产品时就可以从头开始

---

任何帮助都将不胜感激。

请查看下面的代码。希望这对你有帮助

jQuery(document).ready(function($){
    if (jQuery('form.variations_form').length) {
        let $form              = jQuery('form.variations_form');
        let $first_attr_select = $form.find( '.variations select' ).eq(0);
        let first_attr_val     = $first_attr_select.val() || '';

        $first_attr_select.on('change', function(e){
            if (!e.isTrigger) {
                // store the real value only
                first_attr_val = this.value;
            }
        });

        $form.on('woocommerce_update_variation_values', function(){
            let first_attr_name       = $first_attr_select.data( 'attribute_name' ) || $first_attr_select.attr( 'name' ),
                show_option_none        = $first_attr_select.data( 'show_option_none' ),
                option_gt_filter        = ':gt(0)',
                attached_options_count  = 0,
                new_attr_select         = $( '<select/>' ),
                first_attr_val_valid = true;

            let variations          = $form.data('product_variations');

            new_attr_select.html( $first_attr_select.data( 'attribute_html' ) );

            // Loop through variations.
            for ( let variation of variations ) {
                if ( typeof( variation ) !== 'undefined' && first_attr_name in variation.attributes ) {
                    let attr_val         = variation.attributes[ first_attr_name ],
                        variation_active = variation.variation_is_active ? 'enabled' : '';

                    if ( attr_val ) {
                        // Decode entities.
                        attr_val = $( '<div/>' ).html( attr_val ).text();

                        // Attach to matching options by value. This is done to compare
                        // TEXT values rather than any HTML entities.
                        var $option_elements = new_attr_select.find( 'option' );
                        for (var i = 0, len = $option_elements.length; i < len; i++) {
                            var $option_element = $( $option_elements[i] ),
                                option_value = $option_element.val();

                            if ( attr_val === option_value ) {
                                $option_element.addClass( 'attached ' + variation_active );
                                break;
                            }
                        }
                    } else {
                        // Attach all apart from placeholder.
                        new_attr_select.find( 'option:gt(0)' ).addClass( 'attached ' + variation_active );
                    }
                }
            }

            // Count available options.
            attached_options_count = new_attr_select.find( 'option.attached' ).length;

            // Check if current selection is in attached options.
            if ( first_attr_val ) {
                first_attr_val_valid = false;

                if ( 0 !== attached_options_count ) {
                    new_attr_select.find( 'option.attached.enabled' ).each( function() {
                        var option_value = $( this ).val();

                        if ( first_attr_val === option_value ) {
                            first_attr_val_valid = true;
                            return false; // break.
                        }
                    });
                }
            }

            // Detach the placeholder if:
            // - Valid options exist.
            // - The current selection is non-empty.
            // - The current selection is valid.
            // - Placeholders are not set to be permanently visible.
            if ( attached_options_count > 0 && first_attr_val && first_attr_val_valid && ( 'no' === show_option_none ) ) {
                new_attr_select.find( 'option:first' ).remove();
                option_gt_filter = '';
            }

            // Detach unattached.
            new_attr_select.find( 'option' + option_gt_filter + ':not(.attached)' ).remove();

            // Finally, copy to DOM and set value.
            $first_attr_select.html( new_attr_select.html() );
            $first_attr_select.find( 'option' + option_gt_filter + ':not(.enabled)' ).prop( 'disabled', true );

            // Choose selected value.
            if ( first_attr_val ) {
                // If the previously selected value is no longer available, fall back to the placeholder (it's going to be there).
                if ( first_attr_val_valid ) {
                    $first_attr_select.val( first_attr_val );
                } else {
                    $first_attr_select.val( '' ).change();
                }
            } else {
                $first_attr_select.val( '' ); // No change event to prevent infinite loop.
            }

        });
    }
});

jQuery（文档）.ready（函数（$）{
if（jQuery（'form.variations_form'）。长度）{
让$form=jQuery（'form.variations_form'）；
让$first\u attr\u select=$form.find（'.variancesselect'）.eq（0）；
让first_attr_val=$first_attr_select.val（）；
$first_attr_select.on（'change'，函数（e）{
如果（！e.isTrigger）{
//只存储实际值
第一个属性值=this.value；
}
});
$form.on（'woocommerce\u update\u variation\u values'，function（）{
让first_attr_name=$first_attr_select.data（'attribute_name'）|$$first_attr_select.attr（'name'），
show_option_none=$first_attr_select.data（'show_option_none'），
选项\u gt\u过滤器='：gt（0）'，
附加的\u选项\u计数=0，
新属性选择=$（''），
第一个属性值有效=真；
let variations=$form.data（'product_variations'）；
新建属性选择.html（$first\u attr\u select.data（'attribute\u html'）；
//循环变化。
对于（让变化的变化）{
if（typeof（variation）！=“未定义”&&variation.attributes中的第一个属性名）{
让attr_val=variation.attributes[第一个attr_name]，
variation_active=variation.variation_是否处于活动状态？“已启用”：“；
如果（属性值）{
//解码实体。
attr_val=$（''）.html（attr_val.text（）；
//按值附加到匹配选项。这样做是为了比较
//文本值，而不是任何HTML实体。
var$option_elements=new_attr_select.find（'option'）；
对于（var i=0，len=$option_elements.length；i0&&first属性值&&first属性值有效&&（'no'==show\u option\u none））{
新建属性select.find（'option:first'）.remove（）；
选项\u gt\u过滤器=“”；
}
//分离未连接的。
新建属性select.find（'option'+option gt_filter+'：未（.attached））.remove（）；
//最后，复制到DOM并设置值。
$first_attr_select.html（new_attr_select.html（））；
$first_attr_select.find（'option'+option_gt_filter+'：未（.enabled））.prop（'disabled'，true）；
//选择所选值。
如果（第一属性值）{
//如果以前选择的值不再可用，请返回占位符（它将在那里）。
如果（第一个属性值有效）{
$first\u attr\u select.val（first\u attr\u val）；
}否则{
$first_attr_select.val（“”）.change（）；
}
}否则{
$first_attr_select.val（“”）//无任何更改事件可防止无限循环。
}
});
}
});

哇，这个

jQuery(document).ready(function($){
    if (jQuery('form.variations_form').length) {
        let $form              = jQuery('form.variations_form');
        let $first_attr_select = $form.find( '.variations select' ).eq(0);
        let first_attr_val     = $first_attr_select.val() || '';

        $first_attr_select.on('change', function(e){
            if (!e.isTrigger) {
                // store the real value only
                first_attr_val = this.value;
            }
        });

        $form.on('woocommerce_update_variation_values', function(){
            let first_attr_name       = $first_attr_select.data( 'attribute_name' ) || $first_attr_select.attr( 'name' ),
                show_option_none        = $first_attr_select.data( 'show_option_none' ),
                option_gt_filter        = ':gt(0)',
                attached_options_count  = 0,
                new_attr_select         = $( '<select/>' ),
                first_attr_val_valid = true;

            let variations          = $form.data('product_variations');

            new_attr_select.html( $first_attr_select.data( 'attribute_html' ) );

            // Loop through variations.
            for ( let variation of variations ) {
                if ( typeof( variation ) !== 'undefined' && first_attr_name in variation.attributes ) {
                    let attr_val         = variation.attributes[ first_attr_name ],
                        variation_active = variation.variation_is_active ? 'enabled' : '';

                    if ( attr_val ) {
                        // Decode entities.
                        attr_val = $( '<div/>' ).html( attr_val ).text();

                        // Attach to matching options by value. This is done to compare
                        // TEXT values rather than any HTML entities.
                        var $option_elements = new_attr_select.find( 'option' );
                        for (var i = 0, len = $option_elements.length; i < len; i++) {
                            var $option_element = $( $option_elements[i] ),
                                option_value = $option_element.val();

                            if ( attr_val === option_value ) {
                                $option_element.addClass( 'attached ' + variation_active );
                                break;
                            }
                        }
                    } else {
                        // Attach all apart from placeholder.
                        new_attr_select.find( 'option:gt(0)' ).addClass( 'attached ' + variation_active );
                    }
                }
            }

            // Count available options.
            attached_options_count = new_attr_select.find( 'option.attached' ).length;

            // Check if current selection is in attached options.
            if ( first_attr_val ) {
                first_attr_val_valid = false;

                if ( 0 !== attached_options_count ) {
                    new_attr_select.find( 'option.attached.enabled' ).each( function() {
                        var option_value = $( this ).val();

                        if ( first_attr_val === option_value ) {
                            first_attr_val_valid = true;
                            return false; // break.
                        }
                    });
                }
            }

            // Detach the placeholder if:
            // - Valid options exist.
            // - The current selection is non-empty.
            // - The current selection is valid.
            // - Placeholders are not set to be permanently visible.
            if ( attached_options_count > 0 && first_attr_val && first_attr_val_valid && ( 'no' === show_option_none ) ) {
                new_attr_select.find( 'option:first' ).remove();
                option_gt_filter = '';
            }

            // Detach unattached.
            new_attr_select.find( 'option' + option_gt_filter + ':not(.attached)' ).remove();

            // Finally, copy to DOM and set value.
            $first_attr_select.html( new_attr_select.html() );
            $first_attr_select.find( 'option' + option_gt_filter + ':not(.enabled)' ).prop( 'disabled', true );

            // Choose selected value.
            if ( first_attr_val ) {
                // If the previously selected value is no longer available, fall back to the placeholder (it's going to be there).
                if ( first_attr_val_valid ) {
                    $first_attr_select.val( first_attr_val );
                } else {
                    $first_attr_select.val( '' ).change();
                }
            } else {
                $first_attr_select.val( '' ); // No change event to prevent infinite loop.
            }

        });
    }
});