For Advancement Courses

product-select-reconfigure.css

.productAttributeConfigurablePickListSet div.selector.HIDE-ME {
    display: none !important;
 }  


/*
    Creates space for labels that need to be injected
*/    
.productOptionViewSelect {
    margin-top: 40px;
}


/*
    Aligns injects labels correctly
*/
.productOptionViewSelect > div.selector > label {
    display: block !important;
    top: -30px;
    position: relative;
    margin-bottom: -25px;
}

product-select-reconfigure.js

var productSelects = $('.productAttributeConfigurablePickListSet select');

var firstSelect = $(productSelects[0])
var firstSelectId = firstSelect.attr('id')

var secondSelect = $(productSelects[2])
var secondSelectId = firstSelect.attr('id')


var firstSelectDiv = firstSelect.closest('div')
var secondSelectDiv = secondSelect.closest('div')
secondSelectDiv.addClass('HIDE-ME')

// Add labels
firstSelectDiv.prepend( '<label for="' + firstSelectId + '">Credit Type</label>' )
secondSelectDiv.prepend( '<label for="' + secondSelectId + '">Partner/Credit Options</label>' )



// Add listener for first select.
/*
  On change
  - if has value then remove `HIDE-ME` class from second select
  - if does NOT have value and second select does not have class `HIDE-ME` we need to reset and back to step 1

*/
firstSelect.on('change', function(){
    var selectValue = $(this).val()
    if (selectValue !== '') {
        secondSelectDiv.removeClass('HIDE-ME')
    } else {
        secondSelectDiv.addClass('HIDE-ME')
    }
})