javascript - 更改选择框中所选选项的文本颜色

Question

我有一个选择框。这些选项已通过已引用的 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>

因此，如果我选择 Banana，文本应该从黄色变为红色。

我试过:

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 解决这个问题？

Answer 1

试试这个:

.greenText{ background-color:green; }

.blueText{ background-color:blue; }

.redText{ background-color:red; }

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