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

Question

I'm trying to change the text color of the selection box depending on the selected value.

it's working, kind of. Is there a way to not apply the css to the entire element and only to the selection box itself?

https://imgur.com/JJ3jSso when I apply the gray color all of the elements get gray. Is it possible that only the "( keine )" is gray when the selection box is collapsed?

$('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 Code:

<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

You can get the selected value and check if it equals 'keine'. Then apply gray color:

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

Demo (It's just a quick sample, can be refactored of course:))