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/。

谢谢！

Answer 1

好的，您可以使用Jquery阅读所选class的{{1}}，然后将option设置为class的{{1}}。这是代码，然后是小提琴...

CSS

class

Jquery的

<select>

HTML

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

这是小提琴：http://jsfiddle.net/DrydenLong/3QUN6/

<强> 更新

根据请求，以下是我的代码细分：

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

当“color_me”的<select id="color_me" class=""> <option class="green">successful</option> <option class="orange">process failure</option> <option class="pink">abandoned</option> </select>元素发生变化时，此行调用函数。即选择选择列表中的选项。

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

这将变量id定义为当前所选var color = $("option:selected", this).attr("class");的{{1}}。 color变量指的是我们在第一行中引用的DOM元素。基本上class确保我们从正确的option（即我们刚刚点击的this获取课程。

this

此行将上面定义的<select>变量指定为<select> $("#color_me").attr("class", color); }); color的{{1}}。

Answer 2

此代码对我有用：

<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>

Answer 3

希望这会对您有所帮助。

Codepen Live Example

HTML

    <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>

CSS

.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);
}

JS

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);

所选选项的背景颜色

3 个答案: