使用Tampermonkey依次切换Select选项的执行顺序问题求助

你说的没错，虽然JavaScript是同步执行，但dispatchEvent触发的事件处理逻辑里大概率包含异步操作（比如从后端拉取对应选项、通过定时器渲染DOM），导致你设置option2Box.selectedIndex = 47的时候，第二个下拉框的选项还没被填充出来，自然选不中目标选项。

下面给你两个可行的解决办法：

方案1：用MutationObserver监听选项变化（最可靠） #

这个方法能精准监听第二个下拉框的选项何时被添加完成，一旦检测到目标选项存在，就设置选中状态：

var option1Box = document.getElementById('1stBox');
var option2Box = document.getElementById('2ndbox');

// 创建观察者实例，监听第二个下拉框的子节点变化
const observer = new MutationObserver((mutations) => {
  // 检查第48个选项（selectedIndex从0开始）是否存在
  if (option2Box.options.length > 47) {
    option2Box.selectedIndex = 47;
    // 完成后停止监听，避免重复触发
    observer.disconnect();
  }
});

// 配置观察规则：只监听子节点的添加/移除
observer.observe(option2Box, { childList: true });

// 触发第一个下拉框的选择事件
option1Box.selectedIndex = 32;
option1Box.dispatchEvent(evt);

方案2：用setTimeout延迟执行（简单但需调整时长） #

如果没法用MutationObserver，或者你能确定选项填充的最长耗时，可以用定时器延迟执行选中操作，给异步逻辑留够时间：

var option1Box = document.getElementById('1stBox');
var option2Box = document.getElementById('2ndbox');

option1Box.selectedIndex = 32;
option1Box.dispatchEvent(evt);

// 延迟执行，时间根据实际填充速度调整（比如500ms）
setTimeout(() => {
  // 先检查选项是否存在，避免报错
  if (option2Box.options.length > 47) {
    option2Box.selectedIndex = 47;
  }
}, 500);

额外建议 #

如果你能找到第一个下拉框绑定的原始事件回调（比如onchange对应的函数），最好直接调用这个函数并在其异步逻辑的完成回调里设置第二个下拉框的选中状态，这是最精准的方式。

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