如何监听通过代码编程设置select选项的变化

你的MutationObserver没触发，核心原因是：jQuery的val()修改select选中状态时，不会改变select元素本身的属性（比如value属性），只会更新内部选中状态和对应<option>的selected属性。你原代码的Observer仅监听select自身的属性变化，因此无法捕获到选中项的变更。以下是几种可行的解决方案：

方案1：手动触发change事件（最直接可控） #

如果你能控制修改select值的代码逻辑，在调用val()后手动触发change事件，再用常规的change监听即可：

// 查找元素
var banner = $("#banner-message");
var button = $("button");
var sel = $('#myselect');

// 监听change事件
sel.on('change', function() {
  alert('选中项已变更');
});

let counter = 2;
button.on("click", () => {
  if (counter == 1) {
    sel.val('one');
    counter = 2;
  } else {
    sel.val('two');
    counter = 1;
  }
  // 手动触发change事件
  sel.trigger('change');
})

方案2：调整MutationObserver的监听范围 #

既然选中项变化会修改对应<option>的selected属性，你可以让Observer监听select的子元素属性变化：

var sel = $('#myselect');

let observer = new MutationObserver(function(mutations) {
  alert('选中项已变更');
});

// 监听子元素的selected属性变化，同时保留对自身属性的监听（可选）
observer.observe(sel[0], { 
  attributes: true, 
  subtree: true,
  attributeFilter: ['selected'] // 仅监听selected属性，减少不必要的触发
});

let counter = 2;
button.on("click", () => {
  if (counter == 1) {
    sel.val('one');
    counter = 2;
  } else {
    sel.val('two');
    counter = 1;
  }
})

方案3：监听input事件（现代浏览器推荐） #

现代浏览器中，无论是用户手动选择还是通过JavaScript修改选中项，select都会触发input事件，直接监听该事件无需额外操作：

var sel = $('#myselect');

// 监听input事件
sel.on('input', function() {
  alert('选中项已变更');
});

let counter = 2;
button.on("click", () => {
  if (counter == 1) {
    sel.val('one');
    counter = 2;
  } else {
    sel.val('two');
    counter = 1;
  }
})

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