更改所选选项的背景颜色

Question

我有一个选择对象，并且我正在尝试更改所选选项的背景颜色。 因此，当我选择选项“绿色”时，背景颜色必须更改为绿色（颜色信息将从属性data-color中获取）

下面的方法有效，但它没有考虑属性data-color，而仅使用一种颜色（红色）。 我对jQuery解决方案或纯CSS很好。

https://jsfiddle.net/tomsx/y3ofg0m7/

<select id="colors" size="5" style="height:80px;width:100px">
 <option value="1" data-color="red">red</option>
 <option value="2" data-color="green">green</option>
 <option value="3" data-color="yellow" >yellow</option>
</select>

select:focus option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

Answer 1

 $("select#colors").change(function () { var $thisMenu = $(this); $thisMenu.children("option").css("background", ""); var $thisOption = $thisMenu.children("option:selected"); var color = $thisOption.data("color"); $thisOption.css("background", "linear-gradient(0deg, "+ color +" 0%, "+ color +" 100%)"); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <select id="colors" class="colors2" size="5" style="height:80px;width:100px"> <option value="1" data-color="red">red</option> <option value="2" data-color="green">green</option> <option value="3" data-color="yellow" >yellow</option> </select> 

这可以工作，但是选择后会永久更改颜色。 选择其他选项时，这是您想要的还是希望颜色丢失的？