[选中时更改选项的颜色

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!");
      }
  };

Answer 1

似乎您尚未向函数添加'event'参数。试试这个：

function changeColor(event) {
  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!");
  }};

Answer 2

尝试一下。当您选择一个选项时，您将在<select>中收到colorParam元素。如果选择第一个选项，则会在Red中获得colorParam.value，但是在lowerCase中使用的是ID，因此可以使用toLowerCase()函数对其进行转换。然后选择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>

Answer 3

我不确定您可以设置<option>元素的样式。您可以设置<select>元素的样式。但是，color似乎不是可以更改的属性，background-color是。

如果仅此而已，您还可以在onchange处理程序属性中内嵌javascript代码。您需要将<option>元素的值设置为有效的CSS颜色。

<select onchange="this.style.backgroundColor=this.value">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>