HTML Select an event change event on a scroll bar in Chrome if the select tag has a size attribute

Question

I have a simple rectangle with a size attribute, and I want to call a function when its value changes.
Therefore, I am adding the onchange event to the select tag:

<select onchange="alert(this.options[this.selectedIndex].value);" size="6" id="selecttest"> <option value = "1">1</option> <option value = "2" selected>2</option> <option value = "3">3</option> <option value = "4">4</option> <option value = "5">5</option> <option value = "6">6</option> <option value = "7">7</option> <option value = "8">8</option> <option value = "9">9</option> <option value = "10">10</option> <option value = "11">11</option> <option value = "12">12</option> </select> 

See http://jsfiddle.net/MGtJZ/2/ .

In Chrome [version 27.0.1453.94 m] in Windows 7 Pro (not in IE or Firefox from my tests), the onchange event is fired when you simply press the button on the scroll bar of the selection window without changing the value.

This also happens if I have a jQuery change event registered instead of using pure JavaScript ( http://jsfiddle.net/MGtJZ/1/ ), that is, I remove the onchange attribute and register the change event handler as follows:

 $(function () { $('#selecttest').change(function () { alert($(this).val()); }); }); 

Is that what I should expect?

Note. This only happens if you press the scroll bar or arrows first. If you press the selected value or another value, then press the scroll bar / arrow, this behavior will stop.

Answer 1

This is apparently a known issue with 27.0.1453.94.

• Issue 244406: SELECT field with MULTIPLE parameter fires an ONCHANGE event to scroll
• Issue 16184002: REGRESSION: selecting listbox sends a change event to scroll. (Closed)

Answer 2

This does not happen on my Chromium installation. I am sure this is a mistake, although not to be expected. You could make the workaround quite easy though:

 $(function () { var lastVal; $('#selecttest').change(function () { var v = $(this).val(); if (v != lastVal) { fireYourRealOnChangeEventHere(); lastVal = v; } }); });