33

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

4

6 回答 6

49

试试这个：

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

于 2013-04-02T04:05:52.383 回答
27

一种颜色的外壳- 仅 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。

于 2014-09-26T13:29:06.197 回答
8

你可以这样做。

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使用.yellowTextas none selected 是没有意义的，因为必须选择某些东西。

于 2013-04-02T04:06:49.647 回答
4

jQuery代码：

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

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

这是一个示例小提琴。

于 2013-04-02T04:24:35.197 回答
0 
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。

于 2020-03-04T12:02:56.913 回答
-1 
<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>
于 2016-12-27T16:22:03.290 回答