动态设置下拉选项时，如何同步修改Dropdown的Class？

嘿，这个问题太常见了——浏览器只会在用户手动交互改变下拉框选中状态时触发onchange事件，用代码动态修改选中项的时候，不会自动触发这个事件，所以你的colourFunction自然就没执行啦。咱们用几种简单的方式就能搞定：

方法1：动态设置后手动调用colourFunction #

这是最直接的方案，不管你是通过value属性、selectedIndex还是直接设置选项的selected属性修改选中项，只要在修改完成后手动调用绑定的函数就行。

先确保你的colourFunction能正确处理传入的下拉框元素（比如这样写）：

function colourFunction(selectEl) {
  // 先移除下拉框上所有旧的状态类
  selectEl.classList.remove('dd-select', 'dd-ok', 'dd-notok');
  // 获取当前选中的选项
  const selectedOpt = selectEl.options[selectEl.selectedIndex];
  // 给下拉框添加选中选项对应的类
  selectEl.classList.add(selectedOpt.className);
}

那动态设置选项的时候，就这么写：

const statusSelect = document.getElementById('UM_Status_Engraving');
// 动态设置选中值，比如设为"OK"
statusSelect.value = "OK";
// 手动调用函数更新Class
colourFunction(statusSelect);

方法2：触发change事件代替直接调用函数 #

如果你不想直接调用函数，也可以手动触发下拉框的change事件，这样绑定在onchange上的colourFunction会自动执行，和用户手动选择的效果完全一致：

const statusSelect = document.getElementById('UM_Status_Engraving');
statusSelect.value = "NOT OK";
// 触发change事件
statusSelect.dispatchEvent(new Event('change'));

额外优化：页面初始化时同步Class #

别忘了页面加载完成后，初始选中的选项可能已经不是默认的"SELECT"了，这时候也要调用一次函数确保Class正确：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const statusSelect = document.getElementById('UM_Status_Engraving');
  colourFunction(statusSelect);
});

进阶方案：用MutationObserver自动监听变化 #

如果你的场景里有很多地方会动态修改这个下拉框，不想每次都手动调用函数/触发事件，可以用MutationObserver来自动监听选中状态的变化，一有变化就更新Class：

const statusSelect = document.getElementById('UM_Status_Engraving');
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    // 监听下拉框value属性变化，或者选项的selected属性变化
    if ((mutation.type === 'attributes' && mutation.attributeName === 'value') ||
        (mutation.type === 'attributes' && mutation.attributeName === 'selected')) {
      colourFunction(statusSelect);
    }
  });
});

// 配置监听规则：监听自身value属性、子元素selected属性的变化
observer.observe(statusSelect, {
  attributes: true,
  subtree: true,
  attributeFilter: ['value', 'selected']
});

这样不管是手动选还是代码改，下拉框的Class都会自动同步啦～

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