Как выполнить условие выбора двух select option?

Question

[webhero]

Мне необходимо, чтобы при выборе двух состояний выполнялся код (отображался блок)


Есть такой код, он отлично работает если выбран одно из значений option, но при выборе двух он не работает, помогите
з.ы. я так понимаю value option при выборе всегда одно и оно просто сменяется и не может принять 2 состояния

document.addEventListener("DOMContentLoaded", () => {
      const colorSelect = document.querySelector('.hasCustomSelect[name="features[13]"] option').value
      const plugSelect = document.querySelector('.hasCustomSelect[name="features[12]"] option').value

      const typeSelect = document.querySelectorAll('.hasCustomSelect option')

      typeSelect.forEach(item => {
         item.addEventListener('change', function(e) {    //click
            let text = this.value

            if (text == 42) {    //&& text == 1
               console.log(item);
               document.getElementById('sometable').style.display = 'block'
            } else {
               document.getElementById('sometable').style.display = 'none'
            }
         })
   })
})

Answer 1

[Сергей Соколов]

Два селектора – один обработчик.
Надо в одном обработчике смотреть на все значения всех селекторов.

const colorSelect = document.querySelector('.hasCustomSelect[name="features[13]"]');
const plugSelect = document.querySelector('.hasCustomSelect[name="features[12]"]');

const onChange = () => {
  const colorValue = colorSelect.value;
  const plugValue = plugSelect.value;

  if (colorValue === '1' && plugValue === '42') {
    console.log('Оба, на', { colorValue, plugValue });
  } else {
    console.log('Всё не то..', { colorValue, plugValue });
  }
};

[colorSelect, plugSelect].forEach(el => el.addEventListener('input', onChange));

Comments

[webhero]

Ты гений, спасибо за помощь

Answer 2

[GeminiX]

полагаю, что нужно в обработчике найти снова все селекторы, найти нужные, взять из них значения и произвести логику отображения нового селектора