La parte del código "cuando se carga la página" funciona bien.
La parte del código "Cuando se realiza la selección" funciona, pero parece detenerse después de un par de cambios de selección. Me gustaría que funcione en ambos cuadros de selección tantas veces como el usuario cambie las selecciones.
https://jsfiddle.net/czqpkL6j/1/
//when page loads setTimeout(function() { var iframePreLoad = $("#product-component-1635439141053").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'); }); //When selection is made iframePreLoad.find('select').on('change', function() { setTimeout(function() { iframePreLoad.find('select[name=Color] option:nth-child(1)').html('Black'); iframePreLoad.find('select[name=Color] option:nth-child(2)').html('Green'); },100) console.log('selection changed'); }); }, 3000);No estoy seguro de cuál es exactamente el entorno aquí, pero es una suposición descabellada basada en la experiencia: ¿los elementos pueden cambiar después de que se resolvió el selector iframePreLoad.find(..) ? Si es así, los nodos que coincidan con el selector no estarán en el conjunto de resultados (por razones obvias) y, por lo tanto, no tendrán un controlador de change adjunto.
El enfoque habitual para problemas como este es hacer uso del burbujeo de eventos y adjuntar el oyente a un contenedor que rodea los elementos que desea observar. De esa manera, captará eventos incluso de elementos modificados o agregados posteriormente.