如何根据所选选项更改 <select> 标签的颜色（使用纯 JavaScript）？

Question

我正在尝试构建一个 select 标签，根据选择的选项（在本例中为颜色），我希望 select 标签框变为 background-color .然而，当我尝试这个时，我只能让它变成最上面的 child 的颜色（黑色）。怎样才能让它按预期工作？

我试过的：
我试图找到所有 children 并将它们放入一个数组中，但这似乎也不起作用。

我已经插入了 HTML、CSS 和 JavaScript（纯 JS），目前为止：

var select = document.getElementById('primaryColor');
var parent = document.querySelector('.parent');
var children = parent.children; // [<div class="child..">]

select.onchange = function () {
    if (children[0]) {
      select = this.options[this.style.cssText = `
        background-color: black;
        color: white;
        border: 3px solid #333;
      `];
    }
    else if (children[1]) {
      select = this.options[this.style.cssText = `
        background-color: red;
        color: white;
        border: 3px solid #333;
      `];
    }
    else if (children[2]) {
      select = this.options[this.style.cssText = `
        background-color: green;
        color: white;
        border: 3px solid #333;
      `];
    }
    else if (children[3]) {
      select = this.options[this.style.cssText = `
        background-color: blue;
        color: white;
        border: 3px solid #333;
      `];
    }
    else {
      select = this.options[this.style.cssText = `
        background-color: purple;
        color: white;
        border: 3px solid #333;
      `];
    }
}

/* <select> styles */
select {
    /* Reset */
    appearance: none;
    border: 0;
    outline: 0;
    font: sans-serif;

    /* Personalize */
    width: 100%;
    max-width: 100%;
    position: relative;
    color: #fff;
    background-color: #aaaaaa;
    font-size: 16px;
    text-align: center;
    height: 50px;
    line-height: 30px;
    display: block;
    cursor: pointer;
    border: 3px solid transparent;
    /*border-radius: 10px;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

select option {
    color: inherit;
    background-color: gray;
}

select:focus {
    outline: none;
}

option:checked {
    background-color: #1abc9c;
}

select::-ms-expand {
    display: none;
}

<select class="parent" id="primaryColor">
  <option class="child" value="" selected disabled hidden>Choose a color</option>
  <option class="child" value="0">Black</option>
  <option class="child" value="1">Red</option>
  <option class="child" value="2">Green</option>
  <option class="child" value="3">Blue</option>
  <option class="child" value="4">Purple</option>
</select>

Answer 1

你可以这样做：

var select = document.getElementById('primaryColor')
select.onchange = () => {

  // Initial color
  let color = 'white'

  // Check background color and change font color accordingly
  if (select.value == '#fff') color = 'black'

  select.style.cssText = `
        background-color: ${select.value};
        color: ${color};
        border: 3px solid #333;
      `
}

/* <select> styles */

select {
  /* Reset */
  appearance: none;
  border: 0;
  outline: 0;
  font: sans-serif;
  /* Personalize */
  width: 100%;
  max-width: 100%;
  position: relative;
  color: #fff;
  background-color: #aaaaaa;
  font-size: 16px;
  text-align: center;
  height: 50px;
  line-height: 30px;
  display: block;
  cursor: pointer;
  border: 3px solid transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

select option {
  color: white;
  background-color: gray;
}

select:focus {
  outline: none;
}

option:checked {
  background-color: #1abc9c;
}

select::-ms-expand {
  display: none;
}

<select class="parent" id="primaryColor">
  <option class="child" selected disabled hidden>
    Choose a color
  </option>
  <!-- Set value as the hex color -->
  <option class="child" value="#fff">White</option>
  <option class="child" value="#000">Black</option>
  <option class="child" value="#f00">Red</option>
  <option class="child" value="#0f0">Green</option>
  <option class="child" value="#00f">Blue</option>
  <option class="child" value="#204">Purple</option>
</select>

Answer 2

你的 if 条件写得不正确，你只传递了现有值而不是布尔表达式来检查你 selected 的颜色。在 Javascript 中，传递一个现有值被认为是 true，因此它总是以黑色结束，因为它是第一次检查。

要解决此问题，在每个条件内，如果 select 框输入的值 select 等于颜色的相应值。

因此，如果黑色被 select 编辑，则 this.value 将等于零，因此如果 (this.value) 是，您可以将 select 框变为黑色等于零，反之亦然。

但在我看来，@aerial301 的回答更好更清晰。

var select = document.getElementById('primaryColor');
var parent = document.querySelector('.parent');
var children = parent.children; // [<div class="child..">]

   select.onchange = function () {
  if (this.value === '0') {
  select = this.options[this.style.cssText = `
    background-color: black;
    color: white;
    border: 3px solid #333;
  `];
}
else if (this.value === '1') {
  select = this.options[this.style.cssText = `
    background-color: red;
    color: white;
    border: 3px solid #333;
  `];
}
else if (this.value === '2') {
  select = this.options[this.style.cssText = `
    background-color: green;
    color: white;
    border: 3px solid #333;
  `];
}
else if (this.value === '3') {
  select = this.options[this.style.cssText = `
    background-color: blue;
    color: white;
    border: 3px solid #333;
  `];
}
else {
  select = this.options[this.style.cssText = `
    background-color: purple;
    color: white;
    border: 3px solid #333;
  `];
}
}

/* <select> styles */
select {
    /* Reset */
    appearance: none;
    border: 0;
    outline: 0;
    font: sans-serif;

    /* Personalize */
    width: 100%;
    max-width: 100%;
    position: relative;
    color: #fff;
    background-color: #aaaaaa;
    font-size: 16px;
    text-align: center;
    height: 50px;
    line-height: 30px;
    display: block;
    cursor: pointer;
    border: 3px solid transparent;
    /*border-radius: 10px;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

select option {
    color: inherit;
    background-color: gray;
}

select:focus {
    outline: none;
}

option:checked {
    background-color: #1abc9c;
}

select::-ms-expand {
    display: none;
}

<select class="parent" id="primaryColor">
  <option class="child" value="" selected disabled hidden>Choose a color</option>
  <option class="child" value="0">Black</option>
  <option class="child" value="1">Red</option>
  <option class="child" value="2">Green</option>
  <option class="child" value="3">Blue</option>
  <option class="child" value="4">Purple</option>
</select>

如何根据所选选项更改 <select> 标签的颜色（使用纯 JavaScript）？

How can I change the color of the <select> Tag dependent on the option chosen (using pure JavaScript)?

html

javascript

css

html-select