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
  }
});

演示 （這只是一個快速示例，當然可以重構：）