更改 select 背景以匹配 selected 选项背景

Question

我这里有一个简单的查询：

我构建了一个简单的 select，有 2 种不同的颜色可供选择：红色和绿色。

.green { color: #217A23; }
.red    { color: #AA0000; }

<select id="select">
    <option class='green'>green</option>
    <option class='red'>red</option>
</select>

我希望 select 关闭时的文本与 selected 文本的颜色相匹配。

因此，在下拉列表中 select 变为绿色后，我希望 select 文本也为绿色。现在，我可以 select 绿色文本，但是当菜单关闭时，"green" 这个词仍然是黑色的。

这需要 jQuery 做吗？

http://jsfiddle.net/8zkx9yu0/

Answer 1

使用以下代码：

$("#select").on('change',(e)=>{
 // to make backgroud color
    $('body').css({background:e.target.value});
   $(e).removeClass().addClass($(e).find("option:selected").attr("class"););
})

在此处输入代码

Answer 2

您可以这样做，使用您现有的类:

$("select").change(function() {
 let color = $(this).find("option:selected").attr("class");
  $(this).removeClass().addClass(color);
})

.green_bg { background-color: #217A23; }
.red_bg { background-color: #AA0000; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
    <option>Select</option>
    <option class='green_bg'>green</option>
    <option class='red_bg'>red</option>
</select>

更改 select 背景以匹配 selected 选项背景

Change select background to match selected option background

jquery

select

option