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

您似乎尚未向函数中添加“事件”参数。试试这个：

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

我不确定您可以设置ERROR: sklearn.tests.test_site_joblib.test_old_pickle ---------------------------------------------------------------------- Traceback (most recent call last): File "/anaconda3/lib/python3.6/site-packages/nose/case.py", line 197, in runTest self.test(*self.arg) TypeError: test_old_pickle() missing 1 required positional argument: 'tmpdir'元素的样式。不过，您可以设置<option>元素的样式。但是，<select>似乎不是可以更改的属性，color是。

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

<option>

Answer 4

Please check onchange only selected value color will get changed.

$(function() {
//The color of the selected value changed
  jQuery("#state-list").on("change", function() {

    if (jQuery(this).val()) {
    
  let colorselect= jQuery(this).find("option:selected").attr('id');
  jQuery('.statetext option').css("color", "#919ca1");
  jQuery('.statetext').find("option:selected").css("color",  colorselect);
  jQuery('.statetext').css("color",  colorselect)
  } else {
  jQuery('.statetext').css("color", "#919ca1");
  jQuery('.statetext option').css("color", "#919ca1");
  }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="state-list" name="State" data-name="State" class="statetext"  style="color: rgb(145, 156, 161);">
<option value="">State</option>
<option value="CA"  id="red">CA</option>
<option value="BC" id="yellow">BC</option>
<option value="DE" id="green">DE</option></select>

选中时更改选项的颜色-JavaScript

4 个答案: