Kак сделать событие при нажатии на option в форме?

Рейтинг: 0Ответов: 2Опубликовано: 03.08.2023

Не пойму как сделать событие при нажатии на option. Я написал следующий код, но он не работает.

document.addEventListener('click', e => {
    if (e.target.getAttribute('id') === 'selectSeria') alert("SEND");
})
<div class="form-group">
    <label for="exampleFormControlSelect1"></label>
    <select class="form-control" value="Модель"  name="custom" >
      <option class="js-button" value="16" id="selectSeria">Ventura HRL</option>
      <option class="js-button"></option>
      <option id="selectSeria3">3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

</form>

javascript html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Попробуйте так, указал id:

<select class="form-control" value="Модель"  name="custom" id="mySelect">

Код:

var select = document.getElementById('mySelect');
select.addEventListener('change', function() {
  console.log(select.value)
  
});

https://codepen.io/exordio/pen/PoxVyvp

▲ 1

Не пойму как сделать событие при нажатие на option.

Как такового события для этого нет... Но можно отловить изменение самого select. Хотя повторный выбор того же значения перехватываться не будет.

document.addEventListener('change', e => {
  const o = e.target
  if (o.tagName != 'SELECT') return
  const oo = o.options[o.selectedIndex]
  if (oo.id === 'selectSeria') alert("SEND");
})
<div class="form-group">
  <label for="exampleFormControlSelect1"></label>
  <select class="form-control" value="Модель" name="custom">
    <option class="js-button" value="16" id="selectSeria">Ventura HRL</option>
    <option class="js-button"></option>
    <option id="selectSeria3">3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>