如何将背景颜色应用于所选选项？

Question

我正在编写一个带有几个选项和其颜色的下拉菜单。我已经成功地为每个选项着色了背景，但是一旦选择后，该背景颜色就不会显示。

有没有办法改变这种行为？以下是我的HTML示例：

<select>
  <option style="background-color: green">Successful</option>
  <option style="background-color: orange">Process Failure</option>
  <option style="background-color: purple">Abandoned</option>
</select>

或者也可以在这里查看：http://jsfiddle.net/H8HVm/1/。

- NightPharaoh

---

我认为您需要使用JavaScript操作才能完成这个任务。 - mshsayem

你需要将 background-style 应用到 <select> 标签上。至于动态实现，使用 JS/Jquery 是最好的选择。我正在开发一个相关功能，很快就会发布... - Dryden Long

@KatieK OP 正试图更改 <select> 标签的颜色，而不是 <option>。他/她还试图使颜色取决于所做的选择，因此我认为这不是你建议的重复内容。 - Dryden Long

@KatieK，虽然在这篇文章中有选择器（select），但我的问题与<select>标签有关，而不是框选。 - NightPharaoh

Answer 1

您可以使用jQuery读取所选的class，然后将该class设置为的class。以下是代码和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; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="color_me" class=""> <option class="green">successful</option> <option class="orange">process failure</option> <option class="pink">abandoned</option> </select>这是JSFiddle的链接：http://jsfiddle.net/DrydenLong/3QUN6/。根据请求，这是上面代码的细节说明：$("#color_me").change(function(){ 当具有id为"color_me"的元素被更改时，此行调用函数。即选择列表中选择了一个选项。 var color = $("option:selected", this).attr("class"); 这将变量color定义为当前所选option的class。 this变量指的是我们在第一行中引用的DOM元素。基本上，this确保我们从正确的<select>中获取类别，即刚刚单击的<select>。 $("#color_me").attr("class", color); }); 该行将上面定义的color变量指定为具有id为#color_me的元素的class。

- Dryden Long

---

@HashemQolami 不错！纯JS总是加分项。JS Bin在我的Chrome上运行不好，所以我在这里制作了你的代码的fiddle：http://jsfiddle.net/DrydenLong/TUBKk/ - Dryden Long

优雅！正是我所寻找的。 - Taavi

Answer 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");
    });
}
function closeAllSelect(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-items div,.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    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-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

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

这里有一个CodePen链接。

- Md Afsar Uddin

Answer 3

这段代码对我有效：

<script src="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>

- Artem Samoshkin