Изменить выбранный фон в соответствии с выбранным параметром

Question

У меня есть простой запрос здесь:

Я построил простой выбор с двумя различными цветными вариантами: красным и зеленым.

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

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

Я хотел бы, чтобы текст выбора при ЗАКРЫТО соответствовать цвету выделенного текста.

Таким образом, после выбора зеленого цвета в раскрывающемся списке, я бы хотел, чтобы выделенный текст также был зеленым. Прямо сейчас я могу выбрать зеленый текст, но когда меню закрывается, слово «зеленый» по-прежнему черного цвета.

Требуется ли для этого jQuery?

http://jsfiddle.net/8zkx9yu0/

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

Answer 2

Используйте следующий код:

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

введите код здесь