Question

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

第一个是产品类型（在我的情况下是框架或无框架的图稿）第二个是艺术品的尺寸。

test <- data.frame(date = c("2018-01-01", "2018-01-01", "2018-01-15", "2018-01-15"), 
                   name = c("a","b","a","b"), 
                   contrib = c(4,2,4,2), 
                   amt_needed = c(100,100, NA,NA), 
                   remaining = c(94,94, NA,NA))

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

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

示例：

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

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

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

但是我需要在第一个中看到C和D，所以人们总是在选择产品时从头开始。

任何帮助将不胜感激。

Answer 1

请检查以下代码。希望这对你有帮助。

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.
            }

        });
    }
});

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

1 个答案: