I think the problem is solvable. I found this interesting solution:
http://jsfiddle.net/rniemeyer/LBz6d/[
^].
You can add, say,
size="10"
attribute to the
select
elements and add 11 element, to show a scroll bar and to make sure that just scrolling does not fire the event, only selection change.
However, I tested this simple code (not requiring HTML5) and could see that it works properly. This is HTML:
<select size="4" id="newSelect">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
JavaScript:
$( document ).ready(function() {
$( "#newSelect" ).change(function() {
alert( "Selection changed: " + this.value );
});
});
You can run it and see: the event fires only if you change the selection (by clicking at the element or using keyboard, but you really need consistent results here), not when you scroll.
—SA