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

【问题标题】：Change Text Color of Selected Option in a Select Box更改选择框中所选选项的文本颜色
【发布时间】：2013-03-23 06:07:15
【问题描述】：

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

【问题讨论】：

您的onchange 尝试获取backgroundColor，但您的setSelectColor 尝试获取color。这是故意的吗？
@Passerby 复制粘贴错误。固定。
你试过这个解决方案了吗？ stackoverflow.com/a/20538979/452587

标签： javascript html css drop-down-menu colors

【解决方案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>

【讨论】：

【解决方案2】：

你可以这样做。

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 并没有任何意义，因为如果这就是您所得到的，因为必须选择某些东西。

【讨论】：

【解决方案3】：

JQuery 代码：

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

这会将select 的background-color 替换为选定的option 的background-color。

Here is an example fiddle.

【讨论】：

【解决方案4】：

一种颜色的情况 - 仅 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。

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

CSS
select{
  color:red;
 }

HTML
<select id="sel" onclick="document.getElementById('sel').style.color='green';">
 <option>Select Your Option</option>
 <option value="">INDIA</option>
 <option value="">USA</option>
</select>

上面的代码会在点击选择框时改变文本的颜色。

如果您希望每个选项都有不同的颜色，请为所有选项提供单独的类或 id。

【讨论】：