样式选择框选项：选中后禁用

Question

在下图中，我想要Exp。年份（禁用选项）在页面加载时为灰色，如占位符，当单击选项（2016）时，我希望它变为黑色。没有js可以这样做吗？

JSFiddle

目前的工作：

我想要它做什么：（Exp。月份在页面加载时为灰色，然后选择2016年为黑色）

.select-box {
  border: 1px solid $ghBlack;
  height: 36px;
  background: transparent;
  margin: 10px 0 14px 0;
  color: #000;
}

option:disabled {
  color: #a9a9a9;
}

option:not(:checked) {
  color: #a9a9a9;
}

Answer 1

执行此操作的一种方法如下：

// binding an anonymous function as the change-event handler:
$('select').change(function () {
    // adjusting the 'color' property of the select element:
    $(this).css('color', function () {
        // caching the 'this' variable for efficiency (give repeated use):
        var self = this,
        // finding the options of the select element:
            opts = self.options;
        // getting the currently-selected option, and then checking if
        // it's the default-selected option (returns a Boolean); if it is
        // we set the colour to '#aaa', if not we set the colour to '#000':
        return opts[self.selectedIndex].defaultSelected ? '#aaa' : '#000';
    });
// triggering the change-event so that this runs on page-load:
}).change();

JS Fiddle demo

参考：

• change()。
• css()。

Answer 2

当你解释更多你尝试做的事情时，答案是否定的，你不能没有javascript，因为主要选项的颜色只有一个....它由这个css选择器定义

.select-box {
  color: grey;
}

您只能更改选项的颜色（打开选择时） - 小提琴：http://jsfiddle.net/san6q621/