如何在选择框中设置不同的颜色

时间:2019-03-07 作者:Hansjörg Leichsenring

我有一个带有2个选项的选择框。在选择区域中,选项为绿色表示1红色表示2

我还可以将绿色设置为预定义选项的颜色。现在,由于传入的选择,我想更改此选项。

这意味着,如果有人有1个作为预定义的选择,则显示的选择框的显示内容的颜色应为绿色,如果有人有2个作为重新定义的选择,则显示的选择框的显示内容的颜色应为红色。

https://jsfiddle.net/aqd7web5/2/

如果可能的话,整个过程只使用css。

提前感谢

2 个回复
SO网友:Nana Owusu-Marfo

您可以通过向select标记添加onchange事件来实现这一点
试试下面的代码:

HTML:
<;选择id=“derselect”onchange=“this.className=this.options[this.selectedIndex].className“class=“green”>
<;选项class=“绿色”>测试1<;选项class=“红色”>测试2/选择>

And your CSS:
。绿色{颜色:绿色}
。红色{颜色:红色}

:)

SO网友:butalin

您可能需要使用一些jQuery来轻松完成这项工作,例如:

<Select id="select_opt">
  <Option value="green">first</option>
  <Option value="red"> Second </option>
</Select>
然后当您的文档准备就绪时

$(\'#select_opt\').on(\'change\', \'option\' , function{ 

       $(this).attr(\'style\' , \'text-color:\' + $(this).val());

});