Tampermonkey自动选择select下拉菜单选项代码失效问题求解

• 第一处问题是@match配置无效：你当前脚本头里的@match值写的是This is my link，不是合法的页面匹配规则，脚本无法正常注入到目标页面运行，需要替换成目标页面的实际地址匹配规则。
• 第二处核心问题是脚本执行时机过早：Tampermonkey默认会在页面DOM解析的初期执行脚本，此时你要操作的id为abc的下拉框还没有被浏览器渲染到DOM树中，document.getElementById('abc')实际返回值为null，后续的赋值操作属于对空对象设值，会静默失败。你在Chrome控制台运行代码时页面已经完全加载，元素已经存在，所以可以正常生效。
• 额外注意：目标下拉框带multiple多选属性，如果页面是React、Vue这类前端框架渲染的，直接修改value不会触发框架的状态更新，会出现视觉上选中了但提交时不生效的问题，需要手动触发change事件。

方案1：适配静态渲染页面（下拉框写在初始HTML源码中） #

调整脚本的运行时机，等DOM树解析完成后再执行选中逻辑，完整可用代码如下：

// ==UserScript==
// @name         自动选中下拉框指定选项
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  页面加载后自动选中目标下拉选项
// @author       You
// @match        替换为目标页面的实际匹配地址，例如https://xxx.edu.hk/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=edu.hk
// @grant        none
// @run-at       document-end
// ==/UserScript==

document.addEventListener('DOMContentLoaded', () => {
    const selectNode = document.getElementById('abc');
    if (!selectNode) return;
    // 多选下拉先清空原有选中状态
    selectNode.selectedIndex = -1;
    // 选中value为1的B选项
    selectNode.value = '1';
    // 触发change事件，兼容框架渲染的页面
    selectNode.dispatchEvent(new Event('change', { bubbles: true }));
});

方案2：适配动态渲染页面（下拉框由接口请求/JS延迟插入） #

如果页面的下拉框是进入页面后延迟加载的，DOMContentLoaded触发时元素还未生成，可以用轮询的方式等待元素出现后再执行操作，替换上述代码中DOMContentLoaded包裹的逻辑即可：

// 每100毫秒检查一次元素是否存在
const checkTimer = setInterval(() => {
    const selectNode = document.getElementById('abc');
    if (selectNode) {
        clearInterval(checkTimer);
        selectNode.selectedIndex = -1;
        selectNode.value = '1';
        selectNode.dispatchEvent(new Event('change', { bubbles: true }));
    }
}, 100);
// 最多等待10秒，超时停止轮询避免性能损耗
setTimeout(() => clearInterval(checkTimer), 10000);

排查小技巧：如果修改后还是不生效，可以打开Chrome开发者工具的Console面板，切换到Tampermonkey对应的脚本上下文，查看是否有脚本报错，能快速定位是元素不存在还是匹配规则错误的问题。

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