title: Iframe change select option texts
body: <p>The <strong>&quot;when page loads&quot;</strong> part of the code works fine.</p>
  <p>The <strong>&quot;When selection is made&quot;</strong> part of the code works but seems to stop after a couple of selection changes. Would like it to work on both select boxes as many times as the user changes the selections.</p>
  <p><a href="https://jsfiddle.net/czqpkL6j/1/" rel="nofollow noreferrer">https://jsfiddle.net/czqpkL6j/1/</a></p>
  <pre><code> //when page loads 
  setTimeout(function() {           
        var iframePreLoad = $(&quot;#product-component-1635439141053&quot;).children().contents();
        iframePreLoad.find(&quot;.shopify-buy__option-select__select&quot;).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);
  </code></pre>