HTML当select标签具有尺寸属性时，选择滚动条上的更改事件触发点击Chrome

Question

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/ ), ie, 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.

Answer 1

This appears to be a known issue with 27.0.1453.94.

• Issue 244406: SELECT box with MULTIPLE option fires ONCHANGE event on scroll
• Issue 16184002: REGRESSION: Select listbox dispatches a change event on scroll. (Closed)

Answer 2

On my Chromium install it doesn't happen. I'm pretty sure this is a bug though and shouldn't be expected. You could make a workaround pretty easy though:

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

            lastVal = v;
        }
    });
});