我怎样才能改变颜色<select>标签依赖于选择的选项（使用纯 JavaScript）？

Question

我正在尝试构建一个选择标签，其中取决于选择的选项（在这种情况下为颜色），我希望选择标签框更改为该背景颜色。 但是，当我尝试此操作时，我只能将其更改为最上面的孩子的颜色（黑色）。 如何制作它，使其按预期工作？

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

到目前为止，我已经插入了 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 = () => { // Add your desired css style here: select.style.cssText = ` background-color: ${select.value}; 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; -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" selected disabled hidden> Choose a color </option> <!-- Set value as the hex color --> <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 条件写得不正确，您只传递了现有值，而不是检查您选择的颜色的布尔表达式。 在 Javascript 中，传递现有值被认为是 true，因此它总是以黑色结束，因为它是第一个检查。

为了解决这个问题，在每个条件中，如果选择框选择的值等于颜色的相应值。

因此，如果选择黑色，则 this.value 将等于 0，因此如果 (this.value) 等于 0，您可以将选择框变为黑色，反之亦然。

但在我看来，@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>