Нужно добавить класс к конкретному select в зависимости от выбранного option

Question

Задача вывести статусы операции при выборе определенного option и поменять фон select в зависимости от выбранного статуса. Есть html конструкция

function getSelectValue(e) {
  let selectedValue = e.target.value;
  if (selectedValue == "pending") {
    $('.select__input').addClass('pending');
  } else {
    $('.select__input').removeClass('pending');
  }
  if (selectedValue == "completed") {
    $('.select__input').addClass('completed');
  } else {
    $('.select__input').removeClass('completed');
  }
  if (selectedValue == "canceled") {
    $('.select__input').addClass('canceled');
  } else {
    $('.select__input').removeClass('canceled');
  }
}

var list = document.querySelector('.select__input');

list.addEventListener('change', function(e) {
  getSelectValue(e)
});

<select class="select__input status__bar">
  <option value="pending">В ожидании</option>
  <option value="completed">Выполнен</option>
  <option value="canceled">Отказ</option>
</select>

Этот вариант работает, но добавляет классы ко всем селекторам .select__input. Обращаться по разным id к select не могу из за специфики приложения. Подскажите пожалуйста как мне добавить классы только к конкретному select в котором производятся изменения.

Answer 1

Вам не надо заново искать элементы в DOM, а надо работать с текущим, у которого сработал эвент

function getSelectValue(e) {
  let selectedValue = e.target.value;
  if (selectedValue === "pending") {
    e.target.classList.add('pending');
  } else {
    e.target.classList.remove('pending');
  }
  if (selectedValue === "completed") {
    e.target.classList.add('completed');
  } else {
    e.target.classList.remove('completed');
  }
  if (selectedValue === "canceled") {
    e.target.classList.add('canceled');
  } else {
    e.target.classList.remove('canceled');
  }
}

const list = $('.select__input');
list.each((i, item) => {
  item.addEventListener('change', getSelectValue);
})

.canceled {
  background: #FF0000;
}

.completed {
  background: #00FF00;
}

.pending {
  background: #FFFFFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select__input status__bar">
 <option value="pending">В ожидании</option>
 <option value="completed">Выполнен</option>
 <option value="canceled">Отказ</option>
 </select>
 
 <select class="select__input status__bar">
 <option value="pending">В ожидании</option>
 <option value="completed">Выполнен</option>
 <option value="canceled">Отказ</option>
 </select>

При желании, саму функцию getSelectValue можно сократить, добавив "справочник" значений:

const options = ['pending', 'completed', 'canceled'];
function getSelectValue(e) {
  e.target.classList.add(e.target.value);
  options.filter(el => el !== e.target.value).forEach(el => e.target.classList.remove(el))
}

Answer 2

Вы можете добавлять нужный класс к e.target

БЛОГ НА HUSL

Нужно добавить класс к конкретному select в зависимости от выбранного option

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