Проверка select на выбраное значение js

216

17 июля 2021, 13:40

Задача чтобы при blur, если выбрано значение в селекте, он подсвечивался зелёным, если стоит не указано подсвечивался красным. У меня сейчас получается зелёным при любом выборе.

И второй вопрос если много селектов в одной форме и во всех нужно проверить, как правильно их перебрать циклом?

function checkSelect() { 
  const sel = document.getElementById('loan-purpose'); 
  const selNum = sel.selectedIndex; 
 
  sel.addEventListener('blur', function() { 
    if (selNum === 0) { 
      sel.className = ('invalid') 
    } else { 
      sel.className = ('valid') 
    } 
  }); 
} 
 
checkSelect();

.valid { 
  border: 2px solid red; 
} 
 
.invalid { 
  border: 2px solid green; 
}

<select name="name" id="loan-purpose" class="form__loan-purpose-input"> 
  <option value="Не указано">Не указано</option> 
  <option value="Ремонт">Ремонт</option> 
  <option value="Учеба">Учеба</option> 
  <option value="Покупка автомобиля">Покупка автомобиля</option> 
  <option value="Лечение">Лечение</option> 
</select>

Answer 1

Ваша ошибка в том, что Вы получаете selectedIndex до того, как выполняется blur, поэтому значение всегда равно 0. Нужно перенести получение selectedIndex внутрь функции. А если селектов несколько, можно пройтись по ним с помощью, например, forEach:

const allSel = document.querySelectorAll('.form__loan-purpose-input'); 
allSel.forEach((sel) => { 
  sel.addEventListener('blur', function (){ 
    let selNum = sel.selectedIndex; 
    if(selNum === 0){ 
        sel.className = ('invalid') 
    } 
    else{ 
        sel.className = ('valid') 
    } 
  }); 
})

.invalid  { 
  border: 2px solid red; 
} 
 
.valid  { 
  border: 2px solid green; 
}

<select name="name" id="loan-purpose1" class="form__loan-purpose-input"> 
  <option value="Не указано" >Не указано</option> 
  <option value="Ремонт">Ремонт</option> 
  <option value="Учеба">Учеба</option> 
  <option value="Покупка автомобиля">Покупка автомобиля</option> 
  <option value="Лечение">Лечение</option> 
</select> 
 
<select name="name" id="loan-purpose2" class="form__loan-purpose-input"> 
  <option value="Не указано" >Не указано</option> 
  <option value="Ремонт">Ремонт</option> 
  <option value="Учеба">Учеба</option> 
  <option value="Покупка автомобиля">Покупка автомобиля</option> 
  <option value="Лечение">Лечение</option> 
</select> 
 
<select name="name" id="loan-purpose3" class="form__loan-purpose-input"> 
  <option value="Не указано" >Не указано</option> 
  <option value="Ремонт">Ремонт</option> 
  <option value="Учеба">Учеба</option> 
  <option value="Покупка автомобиля">Покупка автомобиля</option> 
  <option value="Лечение">Лечение</option> 
</select>