如何使用纯JavaScript实现<select>标签背景色随选中选项动态更改

你当前的逻辑存在两个核心错误：

• 判断分支的触发条件错误：你用if (children[0])这类判断检查子元素是否存在，只要DOM结构没有被删除，所有option子元素永远都存在，所以代码永远只会命中第一个if分支，因此背景色一直是黑色，不会进入其他分支。
• 多余的变量赋值：代码里select = this.options[xxx]的赋值操作完全不需要，直接修改select元素的样式即可。

你可以直接通过选中项的value值匹配对应颜色，推荐用映射表的方案，后续扩展更方便，优化后的JS代码如下：

var select = document.getElementById('primaryColor');
// 定义value和对应样式的映射表，后续新增颜色直接加这里就行
var colorConfig = {
  '0': {bg: 'black', border: '#333'},
  '1': {bg: 'red', border: '#333'},
  '2': {bg: 'green', border: '#333'},
  '3': {bg: 'blue', border: '#333'},
  '4': {bg: 'purple', border: '#333'}
}
select.onchange = function () {
  // 获取当前选中项的value
  var selectedVal = this.value;
  // 匹配对应配置，找不到就用默认样式
  var config = colorConfig[selectedVal] || {bg: '#aaaaaa', border: 'transparent'};
  // 直接修改select样式
  this.style.cssText = `
    background-color: ${config.bg};
    color: white;
    border: 3px solid ${config.border};
  `;
}

如果你不想用映射表，也可以把原有判断条件修改为判断当前选中的value值即可，修改后的代码如下：

var select = document.getElementById('primaryColor');
select.onchange = function () {
    var selectedVal = this.value;
    if (selectedVal === '0') {
      this.style.cssText = `
        background-color: black;
        color: white;
        border: 3px solid #333;
      `;
    }
    else if (selectedVal === '1') {
      this.style.cssText = `
        background-color: red;
        color: white;
        border: 3px solid #333;
      `;
    }
    else if (selectedVal === '2') {
      this.style.cssText = `
        background-color: green;
        color: white;
        border: 3px solid #333;
      `;
    }
    else if (selectedVal === '3') {
      this.style.cssText = `
        background-color: blue;
        color: white;
        border: 3px solid #333;
      `;
    }
    else if (selectedVal === '4') {
      this.style.cssText = `
        background-color: purple;
        color: white;
        border: 3px solid #333;
      `;
    }
    else {
      // 未选中有效值时恢复默认样式
      this.style.cssText = '';
    }
}

你原有的HTML和CSS代码不需要做任何修改，把上述JS代码替换你原来的JS逻辑即可正常运行，选中对应颜色后select的背景色会同步切换。

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