更改选择背景以匹配所选选项背景答案

【问题标题】：Change select background to match selected option background更改选择背景以匹配所选选项背景
【发布时间】：2020-05-02 17:17:30
【问题描述】：

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

我用 2 种不同颜色的选项构建了一个简单的选择：红色和绿色。

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

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

我希望选择文本 WHEN CLOSED 与所选文本的颜色相匹配。

因此，在下拉菜单中选择绿色后，我希望选择文本也为绿色。现在，我可以选择绿色文本，但是当菜单关闭时，“绿色”这个词仍然是黑色的。

这需要jQuery来做吗？

http://jsfiddle.net/8zkx9yu0/

【问题讨论】：

标签： jquery select option

【解决方案1】：

你可以这样做，使用你现有的类：

$("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>

【讨论】：

@slin 很高兴我能提供帮助:)

【解决方案2】：

使用以下代码：

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

在此处输入代码

【讨论】：