javascript - 样式选择框选项 :disabled when it's checked

Question

在下图中，我想要 Exp。年份(禁用选项)在页面加载时像占位符一样呈灰色，当单击一个选项时(2016 年)，我希望它变成黑色。不用js也可以吗？

JSFiddle

当前做什么:

我想要它做什么:(Exp.Month 在页面加载时是灰色的，然后 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() .