I have a simple select box with a size attribute and I want to call a function when its value changes.
So I add an 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 click in the select box's scroll bar, without the value having changed.
This also happens if I have a jQuery change event registered instead of using pure JavaScript (http://jsfiddle.net/MGtJZ/1/), i.e., I remove the onchange attribute and register the change event handler like so:
$(function () {
$('#selecttest').change(function () {
alert($(this).val());
});
});
Is this what I should be expecting?
Note: This only happens if you click the scroll bar or arrows first. If you click the selected value or another value, then click the scroll bar/arrows, this behavior stops.
Chromium Version 25.0.1364.160 Built on Ubuntu 12.04, running on elementary OS 0.2 (25.0.1364.160-0ubuntu0.12.04.1)
– igorpan May 31 at 23:17