Onchange for <select> with size value

August 14, 2024

You can notice that if you put size into select – onchange stops working. There is "onfocus" even but it doesn’t work either because you have to click outside select every time.
Is there a way to make a working "onchange" event for select with size?

<select name="fruits" size="5">
  <option>banana</option>
  <option>cherry</option>
  <option>strawberry</option>
  <option>durian</option>
  <option>blueberry</option>
</select>

>Solution :

I get all these 6 triggered when I click anything in Chrome and Firefox.

I strongly recommend to use the addEventListener in any case.

const fruits = document.querySelector('[name=fruits]');

fruits.addEventListener('change', () => console.log('change'));
fruits.addEventListener('input', () => console.log('input'));
fruits.addEventListener('click', () => console.log('click'));

fruits.onchange = () => console.log('onchange');
fruits.oninput =  () => console.log('oninput');
fruits.onclick = () => console.log('onclick');

<select name="fruits" size="5">
  <option>banana</option>
  <option>cherry</option>
  <option>strawberry</option>
  <option>durian</option>
  <option>blueberry</option>
</select>