使用 JavaScript 更改 <option> 的背景颜色答案

【问题标题】：Change the background color of an <option> with JavaScript使用 JavaScript 更改 <option> 的背景颜色
【发布时间】：2021-03-12 11:33:22
【问题描述】：

所以，我知道这似乎是一个简单的问题，但它让我心烦意乱。

我有一个选择菜单

<select class="form-control" id="MYID">
<option value="">Selecione...</option>
<option selected="selected" value="1296">OPTION 1</option>
<option value="2313">OPTION 2</option>
<option value="-3">ADD NEW...</option>
</select>

该选项值 = -3 是控制器添加的，因此我无法使用 CSS 进行编辑。我想使用 JS 将该选项放在不同的背景中。所以我尝试获取 ID，然后获取值，然后更改颜色

var option = $('#MYID').val("-3");
option.style.color = "red";

我得到：无法设置未定义的属性“颜色”

我只找到了“将颜色更改为所选选项”的答案，这不是我想要的。

该选项出现在软件的其他下拉菜单中，并且值始终相同，因此如果有更通用的方法来做到这一点，那就太棒了。

【问题讨论】：

请告诉我们你尝试了什么。
@CBroe，我没有尝试太多，因为我很难理解如何获得该选项。但我编辑了我的问题。 var option = $('#MYID').val("-3"); option.style.color = "红色";
$('#MYID').val("-3") 不会为您提供选项元素，它只是将具有该值的选项设置作为选择元素的选定选项。如果你想得到选项元素，根据它的值，那么你的第一个研究关键词是属性选择器。
谢谢！我可以使用 option[value="-3"] { background-color: red; 以一般方式做到这一点。 }

标签： javascript html dropdown

【解决方案1】：

所以，感谢 cmets 中的@CBroe，我找到了一种对我来说最好的方法，因为它很通用。

选择所有具有 value="-3" 属性的元素：

option[value="-3"] {
  background-color: red;
}

【讨论】：