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

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>

Answer 2

ONE COLOR CASE - 仅限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>

对于不同的颜色,根据所选的选项,您将不得不处理js.

Answer 3

你可以这样做.

的jsfiddle

JS

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是没有选择的,如果这是你的东西,必须选择是得到什么.