javascript - Jquery更改iframe选择选项文本

Question

更改 iframe 选择选项文本不起作用，我不知道为什么。JSFiddle

第一个代码块更改选择选项成功

//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);

第二个代码块应该在与选择框交互时更改文本。Example when one of the options are selected, the text for both options should change but it's not working.

//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');
    });
});  

标签： javascriptjquery