8

我正在编写一个包含多个选项及其颜色的下拉菜单。我已成功为每个选项的背景着色；但是，一旦选择该背景颜色就不会显示。

有没有办法改变这种行为？下面是我的 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/。

4

3 回答 3

12

您可以使用 jQuery 读取class所选内容的 ，option然后将其设置class为. 这是代码，然后是小提琴：class<select>

$("#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为class当前选择的变量option。该this变量指的是我们在第一行中引用的 DOM 元素。基本上this确保我们从正确的类中获取类，<select>即<select>我们刚刚点击的类。

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

此行将color上面定义的变量分配为class带有 of 的元素id的#color_me。

于 2013-08-06T23:13:32.727 回答
0 

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 链接。

于 2018-09-02T15:08:05.183 回答
0

这段代码对我有用：

<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>
于 2020-09-08T19:26:27.053 回答