CODEWITHSUNDEEP
javascripthtmlgoogle-chromeselect
Rich
Rich

Reputation: 124

HTML Select change event fires on scroll bar click in Chrome when select tag has a size attribute

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.

Upvotes: 5

Views: 3479

Answers (2)

Daniel Ballinger
Daniel Ballinger

Reputation: 13537

This appears to be a known issue with 27.0.1453.94.

Upvotes: 1

user2742648
user2742648

Reputation:

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;
        }
    });
});

Upvotes: 0

Related Questions