How To Apply Background-color To A Selected Option?

I'm writing a dropdown menu with several options and their colors. I have successfully colored the background of each option; however, once selected that background color doesn't s

Solution 1:

You can use jQuery to read the class of the selected option then set that class as the class of the <select>. Here is the code, followed by a fiddle:

$("#color_me").change(function(){
    var color = $("option:selected", this).attr("class");
    $("#color_me").attr("class", color);
});

.green {
    background-color: green;
}
.orange {
    background-color: orange;
}
.pink {
    background-color: pink;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><selectid="color_me"class=""><optionclass="green">successful</option><optionclass="orange">process failure</option><optionclass="pink">abandoned</option></select>

Here's the JSFiddle: http://jsfiddle.net/DrydenLong/3QUN6/

Per request, here is a breakdown of my code above:

$("#color_me").change(function(){ 

This line calls function when the element with the id of "color_me" is changed. i.e. an option from the select list is chosen.

var color = $("option:selected", this).attr("class");

This defines the variable color as whatever the class of the current selected option is. The this variable is referring to the DOM element we referenced in the first line. Basically this ensures that we are getting the class from the correct <select> i.e. the <select> we just clicked on.

    $("#color_me").attr("class", color);
});

This line assigns the color variable defined above as the class of the element with the id of #color_me.

Solution 2:

var x, i, j, selElmnt, a, b, c;
x = document.getElementsByClassName("tt-select");

for (i = 0; i < x.length; i++) {
    selElmnt = x[i].getElementsByTagName("select")[0];
    a = document.createElement("DIV");
    a.setAttribute("class", "select-selected");
    a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
    x[i].appendChild(a);
    b = document.createElement("DIV");
    b.setAttribute("class", "select-items select-hide");
    for (j = 0; j < selElmnt.length; j++) {
        /*for each option in the original select element,
        create a new DIV that will act as an option item:*/
        c = document.createElement("DIV");
        c.innerHTML = selElmnt.options[j].innerHTML;
        c.addEventListener("click", function(e) {
            var y, i, k, s, h;
            s = this.parentNode.parentNode.getElementsByTagName("select")[0];
            h = this.parentNode.previousSibling;
            for (i = 0; i < s.length; i++) {
                if (s.options[i].innerHTML == this.innerHTML) {
                    s.selectedIndex = i;
                    h.innerHTML = this.innerHTML;
                    y = this.parentNode.getElementsByClassName("same-as-selected");
                    for (k = 0; k < y.length; k++) {
                        y[k].removeAttribute("class");
                    }
                    this.setAttribute("class", "same-as-selected");
                    break;
                }
            }
            h.click();
        });
        b.appendChild(c);
    }
    x[i].appendChild(b);
    a.addEventListener("click", function(e) {
        e.stopPropagation();
        closeAllSelect(this);
        this.nextSibling.classList.toggle("select-hide");
        this.classList.toggle("select-arrow-active");
    });
}
functioncloseAllSelect(elmnt) {
    var x, y, i, arrNo = [];
    x = document.getElementsByClassName("select-items");
    y = document.getElementsByClassName("select-selected");
    for (i = 0; i < y.length; i++) {
        if (elmnt == y[i]) {
            arrNo.push(i)
        } else {
            y[i].classList.remove("select-arrow-active");
        }
    }
    for (i = 0; i < x.length; i++) {
        if (arrNo.indexOf(i)) {
            x[i].classList.add("select-hide");
        }
    }
}
document.addEventListener("click", closeAllSelect);

.tt-select {
    position: relative;
    height: auto;
    padding: 0px;
    margin-bottom: 30px;
    text-align: left;
}
.tt-select select {
    display: none;
}
.select-selected {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.8) !important;
}
.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}
.select-selected:before {
    position: absolute;
    content: "";
    top: 18px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: transparent transparent #000000 transparent;
    transform: rotate(180deg);
}
.select-selected.select-arrow-active:before {
    border: none;
}
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #000000 transparent;
    top: 10px;
}
.select-itemsdiv,.select-selected {
    color: #ffffff;
    padding: 8px16px;
    border: 1px solid #333333;
    cursor: pointer;
}
.select-items {
    position: absolute;
    background-color: #313131;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}
.select-hide {
    display: none;
}
.select-itemsdiv:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

<divclass="tt-select"><select><optionvalue="0">Options</option><optionvalue="1">Option One</option><optionvalue="2">Option Two</option><optionvalue="3">Option Three</option><optionvalue="4">Option Four</option></select></div>

Here is a CodePen link.

Solution 3:

This code works for me:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>
$(document).ready(function(){
    $("select").change(function(){
        var color = $("option:selected", this).attr("class");
        $(this).attr("class", color);
    });
});
</script>