动态选项select标签触发change事件无效，求正确实现方案

1. 修正事件绑定顺序（核心问题） #

你代码失效的根本原因是事件触发发生在监听器注册之前，监听器无法捕获已经触发过的事件。只需要调整代码顺序，先绑定change事件监听器，再执行选中操作和触发事件：

let i = document.querySelector('#i');

// 先绑定事件监听器
i.addEventListener('change', e=>{
  alert('selected : '+e.target.value);
});

// 设置选中项
i.querySelector('[value="7"]').selected = true;

// 触发change事件，显式设置冒泡属性更稳妥
let ev = new Event("change", { bubbles: true });
i.dispatchEvent(ev); 

2. 动态选项场景的额外处理 #

如果你的select选项是动态生成的（比如通过AJAX请求加载、动态DOM插入），需要确保在选项完全加载到DOM后，再执行选中和触发事件的操作：

示例：动态添加选项后触发事件

let i = document.querySelector('#i');

// 先绑定监听器
i.addEventListener('change', e=>{
  alert('selected : '+e.target.value);
});

// 模拟动态添加选项（实际场景可替换为AJAX回调等）
setTimeout(() => {
  // 动态插入新选项
  const newOption = document.createElement('option');
  newOption.value = '10';
  newOption.textContent = '10';
  i.appendChild(newOption);
  
  // 设置选中并触发事件
  i.querySelector('[value="10"]').selected = true;
  i.dispatchEvent(new Event('change', { bubbles: true }));
}, 1000);

如果无法确定动态选项的加载时机，也可以使用MutationObserver监听select的子元素变化，当选项添加完成后自动执行操作：

let i = document.querySelector('#i');

i.addEventListener('change', e=>{
  alert('selected : '+e.target.value);
});

// 监听select的子元素变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length > 0) {
      // 选项已添加，设置选中并触发事件
      const targetOption = i.querySelector('[value="7"]');
      if (targetOption) {
        targetOption.selected = true;
        i.dispatchEvent(new Event('change', { bubbles: true }));
        observer.disconnect(); // 完成后停止监听，避免重复触发
      }
    }
  });
});

observer.observe(i, { childList: true });

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