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的工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

对于不同的颜色，根据所选的选项，您必须处理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并不合理。

Answer 4

JQuery代码：

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

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

Here is an example fiddle.

Answer 5

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。

Answer 6

<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 个答案: