jQuery根据选择的值更改选择文本

Question

我正在尝试根据所选值更改选择框的文本颜色。

它正在工作，有点。 有没有办法不将CSS应用于整个元素，而仅应用于选择框本身？

https://imgur.com/JJ3jSso当我应用灰色时，所有元素都会变成灰色。 选择框折叠时，是否只有“（keine）”是灰色的？

$('select').on('change load', function(){
// console.log($(this).children("option:selected").val());
  if($(this).children("option:selected").val() == "keine"){
    $(this).css('color', '#BFBFBD');
  } else {
    $(this).css('color', '#000');
  }
});

$('select').trigger('change');

HMTL代码：

<select>
  <option value="keine">( keine )</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

https://jsfiddle.net/1keyup/bfd74h5k/1/

Answer 1

您可以获取选定的值，并检查它是否等于“ keine”。 然后应用灰色：

$('select').on('change', function(){
  const value = $(this).val();
  if(value === 'keine') {
    // apply glay color
  } else {
    // apply default color
  }
});

演示 （这只是一个快速示例，当然可以重构：）