jQuery: установить активный класс для выбранной опции

Question

Я пытаюсь добавить «активный» класс в элементе option, но этот код передает его элементу выбора.

HTML code

<select id="category" required >
    <option value="Cats" selected>Cats</option>
    <option value="Dogs">Dogs</option>
    <option value="Birds">Birds</option>
</select>

jQuery код

$('#category').change(function() {
    $("#category").removeClass("active");
    $(this).addClass("active");
});

Answer 1

Вам необходимо добавить класс к выбранной опции и удалить из любой другой опции, ранее выбранной, например:

$('#category').change(function() {
    $('option:selected', this).addClass('active').siblings().removeClass('active');
});

Answer 2

Вы могли бы просто сделать

option:checked {
  background-color:#0F0;
}

<select id="category" required>
<option value="">Please select</option>
  <option value="Cats" selected class="active">Cats</option>
  <option value="Dogs">Dogs</option>
  <option value="Birds">Birds</option>
</select>

ИЛИ

$('#category').change(function() {
  $('option', this).removeClass("active");
  $('option:checked', this).addClass("active");
});

option.active {
  background-color:#0F0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="category" required>
<option value="">Please select</option>
  <option value="Cats" selected class="active">Cats</option>
  <option value="Dogs">Dogs</option>
  <option value="Birds">Birds</option>
</select>