Html Question posted in
Some basic documentation can be found here.

Html – Onchange for <select> with size value

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    you can try Jquery:

    $('input[name="fruits"]').change(function (event) {
       console.log(event.data);
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search