选择时更改选项的颜色

Question

我想要一个在用户选择时更改颜色的选项。例如：用户选择红色选项，然后将运行一个将颜色更改为红色的函数。如果用户随后选择了绿色，那么它将变为绿色。等等

<select onchange="changeColor();" 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>
</select>

我从下面的函数开始，但我不确定哪里出错了。

 function changeColor() {
    var red = document.getElementById('red');
    var green = document.getElementById('green');
    var blue = document.getElementById('blue');

    if(event.target.value == red) {
      red.style.color = "red";
    } else if(event.target.value == green) {
      green.style.color = "green";
    } else if(event.target.value == blue) {
      blue.style.color = "blue";
    } else  {
      alert("There was an error!");
      }
  };

原文由 Gorbles 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这个。当您选择一个选项时，您将在 --- 中收到 --- colorParam <select> 元素。如果您选择第一个选项，您将在 Red colorParam.value ，但是您使用的是小写 ID，因此您可以使用 toLowerCase() 函数 to convert-cb0然后选择 option 元素并应用样式。

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

 <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>

原文由 eag845 发布，翻译遵循 CC BY-SA 4.0 许可协议