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

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>

因此，如果我选择“香蕉”，则文本应从黄色变为红色。

我努力了：

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>