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>
New contributor
JirenCHAD is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
6
I get all these 9 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'));
// Also work, but will overwrite the inline event handlers
/*
fruits.onchange = () => console.log('onchange');
fruits.oninput = () => console.log('oninput');
fruits.onclick = () => console.log('onclick');
*/<select name="fruits" size="5"
onchange="console.log('onchange')"
oninput="console.log('oninput')"
onclick="console.log('onclick')"
>
<option>banana</option>
<option>cherry</option>
<option>strawberry</option>
<option>durian</option>
<option>blueberry</option>
</select>