如何在Chrome中追踪JavaScript修改的select元素值变更事件？

这个问题我之前也遇到过，确实原生的change事件只对用户手动交互有反应，JS修改值时不会自动触发。在Chrome这类现代浏览器里，有两种靠谱的方案可以追踪这种变更：

方案1：使用MutationObserver监听属性变化 #

MutationObserver是浏览器提供的标准API，专门用来监听DOM元素的属性、子节点等变化，兼容性很好（Chrome 26+就支持）。我们可以用它监听select的value属性变化：

// 先获取你的select元素
const targetSelect = document.getElementById('your-select-id');

// 创建一个MutationObserver实例，定义变化后的回调逻辑
const valueObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 只处理value属性的变更
    if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
      console.log('Select值通过JS修改了，新值:', targetSelect.value);
      // 如果你需要触发原本的change事件逻辑，也可以手动派发事件
      targetSelect.dispatchEvent(new Event('change'));
    }
  });
});

// 启动监听，配置为监听属性变化
valueObserver.observe(targetSelect, { attributes: true });

优点：不需要修改元素的原生行为，是标准的监听方式，还可以扩展监听其他属性（比如selectedIndex）的变化，适合追踪第三方代码修改值的场景。

方案2：重写select的value属性setter #

如果需要更直接地拦截所有通过JS赋值value的操作，可以重写select元素的value属性setter，这样每次赋值都会触发我们自定义的逻辑：

const targetSelect = document.getElementById('your-select-id');

// 先保存原生的value setter
const originalValueSetter = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value').set;

// 重写当前select元素的value setter
Object.defineProperty(targetSelect, 'value', {
  set: function(newValue) {
    // 先调用原生setter完成值的设置
    originalValueSetter.call(this, newValue);
    // 触发自定义逻辑，比如打印日志或手动触发change事件
    console.log('Select值被JS修改，新值:', newValue);
    this.dispatchEvent(new Event('change'));
  },
  get: function() {
    // 保留原生的getter逻辑
    return Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value').get.call(this);
  }
});

补充：如果你的场景中存在通过修改selectedIndex或直接设置option.selected来改变select值的情况，可以用同样的方式重写selectedIndex的setter，或者结合MutationObserver监听这些属性的变化。

额外小技巧 #

如果是你自己的代码修改select值，最简单的方式就是在赋值后手动触发change事件：

targetSelect.value = 'new-value';
// 手动派发change事件
targetSelect.dispatchEvent(new Event('change'));

这个方法简单直接，但只适用于你能控制修改逻辑的场景，第三方代码修改的话还是得用前面两种方案。

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