我怎樣才能改變顏色<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>