Как добавить класс элементу, при выборе опции?

Question

Как сделать, чтобы при выборе опции добавлялся или удалялся класс у элемента? Мне нужно, чтобы если выбранная опция содержала "x190", то элементу добавлялся класс "disabled". Если выбранная опция не содержит "x190" или содержит "x200", то убрать "disabled". Пробовал так, не срабатывает:

$('#target').on('change', function () {
  if ( $('#target option:selected:contains("x190")') ) {
    $('.indicator').addClass('disabled');
  };
  if ( $('#target option:selected:contains("x200")') ) {
    $('.indicator').removeClass('disabled');
  };
});

.indicator {
  width: 100px;
  height: 100px;
  background: red;
}
.disabled {
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<select id="target">
  <option>90x190</option>
  <option>90x200</option>
  <option>120x190</option>
  <option>120x200</option>
<select>
<div class="indicator">
</div>
</section>

Answer 1

Внимательнее проверяйте код на синтаксис и опечатки (опечатка в закрывающем теге <select>).
При обработке события change для выпадающего списка, иногда неплохо бы принудительно инициировать это самое событие. Иначе, начальное состояние не верно. Да и, в случае выбора уже выбранного пункта, событие не наступает. Поэтому добавляем к обработчику trigger().
Хотя jQuery была специально написана для облегчения работы с выборкой элементов по селекторам и прочему, не стоит комбинировать "тяжёлые" селекторы в одну цепочку.

$('#target').on('change', function() {
  if ($('#target option:selected').is(':contains("x190")')) {
    $('.indicator').addClass('disabled');
  };
  if ($('#target option:selected').is(':contains("x200")')) {
    $('.indicator').removeClass('disabled');
  };
}).trigger("change");

.indicator { background: red; height: 100px; width: 100px; }
.disabled { background: black; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <select id="target">
    <option>90x190</option>
    <option>90x200</option>
    <option>120x190</option>
    <option>120x200</option>
  </select>
  <div class="indicator"></div>
</section>

БЛОГ НА HUSL

Как добавить класс элементу, при выборе опции?

Ответы (1 шт):