Magento 2.1 – Trigger Event After ‘super-attribute-select’ is Populated

configurable-productmagento-2.1

I have a bunch of configurable products with just one attribute each.

I need to select the first product in the super-attribute-select <select> box (e.g. the second <option>).

This code works from the console…

jQuery('select.super-attribute-select option:nth-of-type(2)').prop('selected', 'selected');
jQuery('select.super-attribute-select').change();

…but not from document.ready, as the <select> box is only populated after the page loads.

Does anyone know the proper technique for doing this?

Best Answer

Thanks to @nshiff for their help. Here is my less than satisfactory but working solution:

document.getElementsByClassName("super-attribute-select").arrive("option", function() {
    $('select.super-attribute-select option:nth-of-type(2)').prop('selected', 'selected');
    window.setTimeout(function() {
        $('select.super-attribute-select').change();
    }, 250);
});

For some reason (I think something to do with require.js) arrive.js isn't registering itself with jQuery, so I'm having to use a good old getElementsByClassName. There's a timeout in there because if I triggered the change() too early it wasn't being picked up.

Related Topic