Magento 2: How to Keep Next Options value selected while changing previous option value on configurable dropdown

Question

Suppose, if i change value of test attribute, than color and demo should be pre-filled with earliest selected value.

Can Anyone Help me in this Problem?

Answer 1

You need to override a file vendor\magento\module-configurable-product\view\frontend\web\js\configurable.js

Make changes to a function _configureElement

_configureElement: function (element) {
    this.simpleProduct = this._getSimpleProductId(element);

    if (element.value) {
        this.options.state[element.config.id] = element.value;

        if (element.nextSetting) {
            element.nextSetting.disabled = false;
            var nextId = element.nextSetting.id;
            var nextSelectedVal = $("#" + nextId).val();
            this._fillSelect(element.nextSetting);
            this._resetChildren(element.nextSetting);
            if (nextSelectedVal.length) {
                $("#" + nextId).val(nextSelectedVal);
                $("#" + nextId).change();
            }
        } else {
            if (!!document.documentMode) { //eslint-disable-line
                this.inputSimpleProduct.val(element.options[element.selectedIndex].config.allowedProducts[0]);
            } else {
                this.inputSimpleProduct.val(element.selectedOptions[0].config.allowedProducts[0]);
            }
        }
    } else {
        this._resetChildren(element);
    }

    this._reloadPrice();
    this._displayRegularPriceBlock(this.simpleProduct);
    this._displayTierPriceBlock(this.simpleProduct);
    this._displayNormalPriceLabel();
    this._changeProductImage();
},

Also, to below function,

_resetChildren: function (element) {
    if (element.childSettings) {
        _.each(element.childSettings, function (set) {
            //set.selectedIndex = 0;
            set.disabled = true;
        });

        if (element.config) {
            this.options.state[element.config.id] = false;
        }
    }
},