title: HTML Select change event fires on scroll bar click in Chrome when select tag has a size attribute
body: <p>I have a simple select box with a size attribute and I want to call a function when its value changes.<br>
  So I add an onchange event to the select tag:</p>
  
  <pre><code>&lt;select onchange="alert(this.options[this.selectedIndex].value);" size="6" id="selecttest"&gt;
    &lt;option value = "1"&gt;1&lt;/option&gt;
    &lt;option value = "2" selected&gt;2&lt;/option&gt;
    &lt;option value = "3"&gt;3&lt;/option&gt;
    &lt;option value = "4"&gt;4&lt;/option&gt;
    &lt;option value = "5"&gt;5&lt;/option&gt;
    &lt;option value = "6"&gt;6&lt;/option&gt;
    &lt;option value = "7"&gt;7&lt;/option&gt;
    &lt;option value = "8"&gt;8&lt;/option&gt;
    &lt;option value = "9"&gt;9&lt;/option&gt;
    &lt;option value = "10"&gt;10&lt;/option&gt;
    &lt;option value = "11"&gt;11&lt;/option&gt;
    &lt;option value = "12"&gt;12&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>See <a href="http://jsfiddle.net/MGtJZ/2/" rel="nofollow">http://jsfiddle.net/MGtJZ/2/</a>.  </p>
  
  <p>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.</p>
  
  <p>This also happens if I have a jQuery change event registered instead of using pure JavaScript  (<a href="http://jsfiddle.net/MGtJZ/1/" rel="nofollow">http://jsfiddle.net/MGtJZ/1/</a>), i.e., I remove the onchange attribute and register the change event handler like so:  </p>
  
  <pre><code>$(function () {
    $('#selecttest').change(function () {
      alert($(this).val());
    });
  });
  </code></pre>
  
  <p>Is this what I should be expecting?</p>
  
  <p>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.</p>