如何使用 jQuery 更改 select 中第一个选项的颜色

Question

我有以下Html

<select>
 <option value>--Select--</option>
 <option value="60">Salaried Employee</option>
 <option value="61">Trainee</option>
 <option value="62">Skilled Worker</option>    
</select>

现在我的要求是将第一个选项显示为蓝色，其余选项显示为黑色。第一个选项应该是蓝色的，无论是否选择。我有以下 jQuery as

$('select option:first-child').css('color', 'blue ');

上面的代码在选中时不会将第一个选项显示为蓝色。我哪里错了欢迎任何帮助。感谢阅读。

Answer 1

http://jsfiddle.net/9ggw1cds/

HTML

<select class="colorMeBlue noValue">
 <option value>--Select--</option>
 <option value="60">Salaried Employee</option>
 <option value="61">Trainee</option>
 <option value="62">Skilled Worker</option>    
</select>

CSS

select.colorMeBlue.noValue,
select.colorMeBlue option:first-child {
    color: blue;
}

select.colorMeBlue option:not(:first-child) {
    color: black;
}

JAVASCRIPT

$('select').on('change', function(){
    var $this = $(this);

    if (!$this.val()) {
        $this.addClass('noValue');
    } else {
        $this.removeClass('noValue');
    }
});

这个逻辑至少做了两个假设。 1) 您可以将两个类（或您选择制作它们的任何内容）添加到 select 元素，并且 2) 元素在绑定执行时存在。

如果内容被动态添加到页面，那么您将需要一种方式来了解元素的创建时间，以便您可以添加类并绑定到元素。

或者，如果您不知道元素何时被添加，但您知道它们将被添加到容器元素中，您可以使用委托绑定到该元素。例如...

<div class="selectContainer">
    <select class="colorMeBlue noValue">
        <option value>--Select--</option>
        <option value="60">Salaried Employee</option>
        <option value="61">Trainee</option>
        <option value="62">Skilled Worker</option>    
    </select>
</div>

在这种情况下，如果您知道 selectContainer 将在您运行之前出现在页面上，您的绑定和内部 select 将在稍后动态生成上，你可以改为绑定...

$('.selectContainer').on('change', 'select', function(){
    var $this = $(this);

    if (!$this.val()) {
        $this.addClass('noValue');
    } else {
        $this.removeClass('noValue');
    }
});

到那时，select 何时生成都无关紧要了。

Answer 2

你的 jQuery 是正确的。

这也有效：$('select option:first').css('color', 'blue ');

很遗憾，您正在尝试为特定于浏览器的元素设置样式。

基本上，像 Safari 和 Chrome 这样的 Webkit 浏览器通常会利用操作系统元素来完成这项工作，因此在 Chrome 中为下拉列表设置样式的代码可能不会在 Windows OSX 上 Chrome 无法工作。此外，iOS 或 Android 等移动操作系统通常会显示选择选项的微调器。

有关详细信息，请参阅 How to style a select tag's option element?。

另外：https://css-tricks.com/dropdown-default-styling/

如果完全控制下拉菜单的样式很重要，我建议使用自定义 bootstrap solution like this one from silviomoreto。他在底部附近有一些颜色示例。

(see Silvio's code on GitHub)

如何使用 jQuery 更改 select 中第一个选项的颜色

How to change the color of first option in select using jQuery

jquery

jquery-selectors