Hide unavailable secondary product options in Shopify's Debut theme

theme.js

/*

    **README**

    The method below simply makes variant options which aren't available in a secondary dropdown menu "disabled"
    when using the Debut theme in Shopify.
    
    It works for me, but I'm not making any promises for you...
    
    Firstly, the _hideUnavailableOptions method needs to be added to Variants.prototype (see code below). 
    Secondly, this method needs to be called from two different places:
    
    function Variants(options) {
      ...
        this._hideUnavailableOptions();  //N.B. this MUST be before the next line
        this.currentVariant = this._getVariantFromOptions(); 
    }
    
    and again, call the method from Variants.prototype._onSelectChange() - make sure it's the first line in there
    
    _onSelectChange: function() {
        let hideUnavailable = this._hideUnavailableOptions(); //N.B. this MUST be before the next line
        var variant = this._getVariantFromOptions();
      ...
    }
    
*/

Variants.prototype = _.assignIn({}, Variants.prototype, {
    
  //obviously lots of methods precede this - but I found a place for this after _getVariantFromOptions...  
    
  /**
   * Hide secondary select options which are not available.
   */
  _hideUnavailableOptions: function() {
    const option1 = document.getElementById("SingleOptionSelector-0");
    const option2 = document.getElementById("SingleOptionSelector-1");
    const secondOptions = option2.options;      
    const variants = this.product.variants;
    let possibles = [];
    variants.forEach((variant) => {
      if (variant.options.includes(option1.value)) {
        possibles.push(variant.options)
      }
    })
    for (let option of secondOptions) {
      const value = option.value;
      let flag = false;
      possibles.forEach((possible) => {
        if (possible.includes(value)) {
          flag = true;
        }
      })
      if (flag === false) {
        option.removeAttribute('selected');
        option.setAttribute('disabled', 'disabled');
      } else {
        option.removeAttribute('disabled');
      }
    }
    option2.querySelector(':not([disabled="disabled"])').setAttribute('selected', 'selected');
  },
  
  //after this will be _onSelectChange etc...
   
}

Hey,

The according options are not not clickable anymore, however i can see them in the drop down on the second level.

Any chance you know how to fix this?