Как вместе с option менять его цвет на заданный ему инлайново?

Question

[Дмитрий Воробьев]

Есть вот такой к примеру список, не знаю как при выборе option он отображал его с изначальным цветом option

<select class="status-select">
    <option style="color:green;">Оформлен</option>
    <option style="color:yellow;">Выставлен счет</option>
    <option style="color:red;">Отказ</option>
    <option style="color:red;">Думает</option>
    <option style="color:red;">Не отвечает</option>
</select>

но при выборе цвет всегда черный

Comments

[Vyach Gor]

решение на css не будет работать - тут вариант только выбрать из множества js плагинов для кастомизации select и уже в нем решать эту задачу.

[Одиночка Айс]

Vyach Gor, странно, тут почему-то работает - https://codepen.io/daemonhk/pen/MWyQRBj

[Дмитрий Воробьев]

Одиночка Айс, Не работает он, суть не в цвете, цвет задать то не проблема, вопрос сделать его при выборе активным

[Одиночка Айс]

pillson, А, понял. В HTML элементы форм считай нельзя менять с помощью css. Либо на js, либо на html+js делать имитацию нужных элементов.

[Дмитрий Воробьев]

Одиночка Айс, да я уже сделал по примеру Stalker_RED вопрос только в сохранении теперь, т.к. при обновлении страницы сбрасываются

Answer 1

[Stalker_RED]

document.querySelector('.status-select')
.addEventListener('change', function() {
  const option = this.options[this.selectedIndex];
  this.style.color = option.style.color;
});

Comments

[Дмитрий Воробьев]

супер, спасибо, ванильный рулит )

[Дмитрий Воробьев]

Единственный вопрос теперь как сохранять это, в базу писать вместе со статусом? т.к. после перезагрузки обнуляется

[Stalker_RED]

pillson, не обязательно в базу, можно js-ом менять при загрузке страницы. Или при формировании options заполняйте, если у вас там не статика.

[Дмитрий Воробьев]

Stalker_RED, не, не статика, динамика