Cambiar el texto de las opciones de selección de iframe no funciona y no puedo entender por qué. JSFiddle

El primer bloque de cambios de código selecciona las opciones con éxito

 //when page loads setTimeout(function() { var iframePreLoad = $("#product-component-1631134480393").children().contents(); iframePreLoad.find(".shopify-buy__option-select__select").ready(function(){ iframePreLoad.find('select[name=Color] option:nth-child(1)').html('Black'); iframePreLoad.find('select[name=Color] option:nth-child(2)').html('Green'); }); }, 3000);

Se supone que el segundo bloque de código cambia el texto cuando se interactúa con el cuadro de selección. Ejemplo cuando se selecciona una de las opciones, el texto de ambas opciones debería cambiar pero no funciona.

 //When selection is made $("#product-component-1631134480393").on('load', function() { $("#product-component-1631134480393").children().contents().find("select[name=Color]").on('change', function() { $('select[name=Color] option:nth-child(1)').html('Black'); $('select[name=Color] option:nth-child(2)').html('Green'); console.log('selection changed'); }); });