如何使用javascript仅更改所选选项的背景颜色？

Question

当用户选择某个选项时，我试图更改背景颜色。我用 onchange 函数做到了，它只包含：

function colorSameValues(select, color){
    for (var i=0; i<selects.length; i++){
        if (selects[i].value ==='') selects[i].style.backgroundColor='';
        if (selects[i].value === select.value) selects[i].style.backgroundColor=color;
    }
}

但它会改变所有选项的背景颜色。

我还在互联网上看到如何更改所选选项的颜色，但它不会更改显示的选项，就像这里（第一个响应） - Change the color of an option when selected - JavaScript

我想对显示的选项进行着色，当用户单击此选择以查看其他选项时，我希望它们根本不着色。有任何想法吗？

这就是我想要得到的

Answer 1

尝试这样。

我添加了一个CSS作为option背景。在JS中，我设置了选择框的背景。

function changeColor(colorParam) {
    let color = colorParam.value.toLowerCase();
    var optionElement = document.getElementById('rgb');
    optionElement.style.background = color;
};

option{
  background:#fff;
}

<select onchange="changeColor(this);" class="color" id="rgb">
  <option id="red" value="Red">Red</option>
  <option id="green" value="Green">Green</option>
  <option id="blue" value="Blue">Blue</option>
  <option id="white" value="White">White</option>
  <option id="pink" value="Pink">Pink</option>
</select>