等待插件动态生成元素加载：解决length未定义问题

你之前的MutationObserver方案失效的核心问题是选择器写错了——类选择器需要加上.，写成.pp_pricing_options而非pp_pricing_options，另外还需要确保下拉框的选项也已加载完成，以下是修复后的可行方案：

修复后的MutationObserver方案 #

这个方案能精准监听动态元素的生成，同时确保下拉框选项加载完成：

$(document).ready(function () {
    async function waitForElm(selector) {
        return new Promise(resolve => {
            // 检查元素是否存在且已有选项
            const checkValidElement = () => {
                const elm = document.querySelector(selector);
                return elm && elm.options.length > 0 ? elm : null;
            };

            // 先检查一次，避免不必要的监听
            const existingElm = checkValidElement();
            if (existingElm) {
                return resolve(existingElm);
            }

            const observer = new MutationObserver(() => {
                const elm = checkValidElement();
                if (elm) {
                    observer.disconnect();
                    resolve(elm);
                }
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        });
    }

    async function start() {
        try {
            const select = await waitForElm(".pp_pricing_options");
            let plan = localStorage.getItem("Plan");
            
            // 处理Plan不存在的情况，避免后续报错
            if (!plan) return;

            // 简化字符串格式统一逻辑
            plan = plan.replaceAll(/\s+/g, '')
                       .toLowerCase()
                       .replace(/^./, str => str.toUpperCase());

            // 快速定位目标选项并选中
            const targetOption = Array.from(select.options).find(opt => 
                opt.textContent.trim().includes(plan)
            );
            if (targetOption) {
                targetOption.selected = true;
                // 可选：触发change事件，确保插件感知到选中状态变化
                select.dispatchEvent(new Event('change'));
            }
        } catch (err) {
            console.error("下拉框选中处理失败:", err);
        }
    } 
    start();
});

关键修复&优化点： #

1. 修正类选择器，添加.前缀
2. 增加选项存在检查，避免select已生成但选项还未加载的情况
3. 简化字符串格式处理逻辑，代码更简洁
4. 使用Array.from().find()替代for循环，可读性更高
5. 增加异常捕获，避免代码报错中断后续逻辑
6. 可选触发change事件，确保依赖该下拉框的插件能同步状态

备选方案：轮询检查（SetInterval） #

如果MutationObserver仍有兼容性问题，可以用轮询方式兜底：

$(document).ready(function () {
    const checkTimer = setInterval(() => {
        const select = document.querySelector(".pp_pricing_options");
        if (select && select.options.length > 0) {
            clearInterval(checkTimer);
            
            let plan = localStorage.getItem("Plan");
            if (!plan) return;

            plan = plan.replaceAll(/\s+/g, '')
                       .toLowerCase()
                       .replace(/^./, str => str.toUpperCase());

            const targetOption = Array.from(select.options).find(opt => 
                opt.textContent.trim().includes(plan)
            );
            if (targetOption) {
                targetOption.selected = true;
                select.dispatchEvent(new Event('change'));
            }
        }
    }, 200); // 每200ms检查一次，可根据实际调整间隔
});

注意事项： #

• 轮询间隔不要过短（如小于100ms），避免占用过多资源；也不要过长，确保及时响应元素生成
• 找到有效元素后立即清除定时器，终止无效循环

额外提示 #

• 务必处理localStorage.getItem("Plan")返回null的情况，避免后续字符串操作报错
• 如果清楚插件生成下拉框的大致延迟时间，也可以用setTimeout做简单延迟，但这种方式可靠性远低于前两种方案

内容的提问来源于stack exchange，提问作者Zaid Alnuami