javascript - 如何将背景颜色应用于选定的选项？

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所选 option然后设置class作为class的 <select> .这是代码，后面是 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无论class当前选择的 option是。 this变量指的是我们在第一行中引用的 DOM 元素。基本上 this确保我们从正确的 <select> 获取类即 <select>我们只是点击了。

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

这一行分配了 color上面定义为 class 的变量带有 id 的元素的 #color_me .