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

$('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）您可以将两个类（或您选择的任何类）添加到选择元素中，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将在页面上，并且稍后将动态生成内部选择，则可以改为绑定...

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

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

此时，生成选择时无关紧要。

Answer 2

你的jQuery是正确的。

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

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

基本上，像Safari和Chrome这样的Webkit浏览器通常会利用操作系统元素来实现这一功能，因此在Windows上Chrome下载样式的代码可能无法在OSX上的Chrome中运行。此外，iOS或Android等移动操作系统通常会显示选择的微调选项。

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

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

如果完全控制下拉列表的样式非常重要，建议您使用bootstrap之类的自定义this one from silviomoreto解决方案。他底部有一些颜色的例子。

（see Silvio's code on GitHub）

如何使用jQuery

2 个答案: