jQuery修改iframe内select下拉框选项文本，change事件触发时修改失效求助

• 第二段代码的修改逻辑使用全局$选择器检索元素，默认只会查找父页面的DOM树，而目标select元素位于iframe的独立DOM上下文内，全局选择器无法命中iframe内部元素，因此修改不生效。
• 如果你能在控制台看到正常打印selection changed日志，可以进一步验证该结论：事件绑定时你限定了在iframe上下文内查找，因此事件能正常触发，但修改DOM时没有限定范围，导致找不到目标元素。
• 补充优化建议：第一段代码使用固定3秒延时的逻辑稳定性较差，建议替换为iframe的load事件监听逻辑，避免iframe加载过慢导致修改失效。

//When selection is made  
$("#product-component-1631134480393").on('load', function() {
    const $iframeContents = $(this).children().contents();
    $iframeContents.find("select[name=Color]").on('change', function() {
        // 直接使用当前触发事件的select元素作为查找范围，无需重复查询iframe
        const $currentSelect = $(this);
        $currentSelect.find('option:nth-child(1)').html('Black');        
        $currentSelect.find('option:nth-child(2)').html('Green');
        console.log('selection changed');
    });
});

内容的提问来源于stack exchange，提问作者Vim Bonsu