Question

我在一个带有颜色的选项中有一个选项来表示重要性。它在下拉菜单中是红色的，但是当它被选中时它再次变黑。有没有办法让它在被选中后保持红色？以下是jsFiddle来演示。感谢。

#red{color:red;}

<select>
  <option>normal</option>
  <option id = "red">important</option>
  <option>normal</option>  
</select>

Answer 1

您可以使用javascript更改依赖于值的选择颜色。

以下是jsFiddle示例

$('#select').on('change', function(){
    if($(this).val() === 'important'){
        $(this).addClass('red')
    }
})

Answer 2

我使用了onchange事件，idk如果你想这样做，但它是一个选项。实际上，这是将类切换到所选类的选项，从而改变其颜色

＆＃13;

.greenText{ color:green; }

.blueText{ color:blue; }

.redText{ color:red; }

＆＃13;

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

＆＃13;

Answer 3

您也可以使用JQuery。

$("select").change(function(){
    $(this).css("color", $(this).children("option:selected").css("color")); 
});

检查此Full view

保持选择值所选选项的颜色

3 个答案: