Изменение цвета текста выбранного параметра в поле выбора

У меня есть поле выбора. Параметры были оформлены разными цветами через файл CSS, на который были указаны ссылки. Я хочу иметь возможность выбрать параметр и изменить цвет текста закрытого блока выбора на цвет выбранного параметра.

<select id="mySelect" class="yellowText">
    <option class="greenText" value="apple" >Apple</option>
    <option class="redText" value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>
</select>

Итак, если я выберу Банану, текст должен измениться с желтого на красный.

Я пробовал:

onchange="this.style.color = this.options[this.selectedIndex].style.color;"

Но это работает только в том случае, если я определяю свои стили внутри тегов параметров внутри html-документа.

Я также пробовал JavaScript:

function setSelectColor(thisElement){
    var thisElem = document.getElementById(thisElement);
    var thisOption = thisElem.options[thisElem.selectedIndex];
    var newColor = getStyle(thisOption,"color");
    alert("New Color: "+ newColor);
}

Но это всегда возвращает цвет: белый. Функция getStyle работает везде, где я ее использую, поэтому я не верю в эту проблему.

Я получил getStyle с этого самого веб-сайта:

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

Как я могу решить это с помощью JavaScript?

Ответ 1

Попробуйте следующее:

<select
    onchange="this.className=this.options[this.selectedIndex].className"
    class="greenText">
     <option class="greenText" value="apple" >Apple</option>
    <option class="redText"   value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>
</select>

и используйте этот css:

.greenText{ background-color:green; }

.blueText{ background-color:blue; }

.redText{ background-color:red; }

Ответ 2

ОДНО ЦВЕТНЫЙ СЛУЧАЙ - только CSS

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

Сначала я попытался установить css только цвет выбранной опции без успеха.

Затем, пробовав некоторые комбинации, это сработало для меня с SCSS:

select {
      color: white; // color of the selected option

      option {
        color: black; // color of all the other options
      }
 }

Взгляните на рабочий пример с CSS:

select {
  color: yellow; // color of the selected option
 }

select option {
  color: black; // color of all the other options
}

<select id="mySelect">
    <option value="apple" >Apple</option>
    <option value="banana" >Banana</option>
    <option value="grape" >Grape</option>
</select>

Ответ 3

Вы можете сделать это вот так.

jsFiddle

var select = document.getElementById('mySelect');
select.onchange = function () {
    select.className = this.options[this.selectedIndex].className;
}

CSS

.redText {
    background-color:#F00;
}
.greenText {
    background-color:#0F0;
}
.blueText {
    background-color:#00F;
}

Вы можете использовать option { background-color: #FFF; }, если вы хотите, чтобы список был белым.

HTML

<select id="mySelect" class="greenText">
    <option class="greenText" value="apple" >Apple</option>
    <option class="redText"   value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>
</select>

Так как это select, на самом деле нет смысла использовать .yellowText, поскольку ни один не выбран, если вы выбрали что-то, что вы должны выбрать.

Ответ 4

Код JQuery:

$('#mySelect').change(function () {
    $('#mySelect').css("background", $("select option:selected").css("background-color"));
});

Это заменит select background-color на выбранный option background-color.

Вот пример скрипта.

Ответ 5

<html>
  <style>
.selectBox{
 color:White;
}
.optionBox{
  color:black;
}

</style>
<body>
<select class = "selectBox">
  <option class = "optionBox">One</option>
  <option class = "optionBox">Two</option>
  <option class = "optionBox">Three</option>
</select>