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

Question

I am trying to build a select tag, where dependent on the option chosen (colors in this case), I want the select tag box to change into that background-color. However, when I try this I can only get it to change to the uppermost child's color (black). How can make it, so it works as intended?

I have tried to find all children and put them into an array, however this seem not to work either.

I have inserted the HTML, CSS and JavaScript (Pure JS) I have so far:

 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

You can do something like this:

 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

Your if conditions are not written properly, you have only passed and existing value instead of a boolean expression which checks which color you have selected. In Javascript, passing a existing value is considered true, therefore it always ends up being black since it is the first check.

To fix this, inside every condition, for if the value selected by the select box is equal to the corresponding value of the color.

So if Black is selected, then this.value will be equal to zero, therefore you can turn the select box black if the (this.value) is equal to zero and vice versa.

but in my opinion, @aerial301's answer is much better and cleaner.

 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>