The Netlobo logo - a Nevada desert landscape

The Javascript Select-box onchange Problem

Some javascript solutions for the select-box scrolling problem that occurs when a user uses the mouse scroll wheel while focused in a select box.

Published Sep 29, 2006 by lobo235
Last updated on May 19, 2009

In this article I will address a problem related to applying a javascript onchange function to an html select-box. With the wonderful introduction of the scroll-wheel on the mouse, web forms can be more difficult to use. I know that I have sometimes forgotten that I placed the focus in a select-box and then tried to scroll down the page. The results can be disastrous depending on the way that the web application you are using was designed. If a javascript onchange function has been tied to that select-box then it will be executed for each item in the list that you scrolled through. This can ruin the user's experience or it could cause problems for your server. I recently heard about a large web application that actually had some downtime that was caused by a user who scrolled through a select-box whose onchange function was supposed to reload the current page with the new selected option as a parameter. To help you prevent this in your own web applications, I will present you with three different solutions. I will also explain how each one works to prevent your javascript onchange function from being called excessively.

First onchange function

// executes an onchange function after 750ms (or specified delay)
function safeOnChange1( code, delay ) {
  delay = delay || 750;
  window.clearTimeout( soc_id );
  soc_id = window.setTimeout( code, delay );
}
// global timer ID for the safeOnChange1 function.

var soc_id = null;

As you can see, this function uses a 750ms timer to prevent multiple onchange functions from being called. After an option is selected the safeOnChange1 function will wait for 750ms and if another option has not been chosen it will execute the code passed into it. This introduces a tiny delay that the user may or may not notice and you can tweak it by passing in a different milliseconds value.

Second onchange function

// once the onchange event is called the focus is set to the
// document body to prevent further scrolling
function safeOnChange2( code ) {
  document.body.focus( );
  eval( code );
}

The second function prevents select-box scrolling by removing the user's focus from the select-box once they have chosen an option. This may or may not be desirable depending on your web application. It can also break form usability if your users use the TAB key to navigate from field to field. Nonetheless, it may still have it's uses.

Third onchange function

// once the onchange event is called a variable is set to prevent
// the onchange code from running again
function safeOnChange3( code ) {
  if( !soc_submitted )
  {
    eval( code );
    soc_submitted = true;
  }
}
// global submitted flag for the safeOnChange3 function
var soc_submitted = false;

This third function prevents the select-box scrolling problem by only executing the onchange code once and then preventing it from executing when another option is chosen. Again, this may or may not work for your web application.

Examples

Here are a few examples that you can try.

select-box #1 - uses safeOnChange1


select-box #2 - uses safeOnChange2


select-box #3 - uses safeOnChange3

Conclusion

I leave it up to you to choose which method will work best for your web application. I prefer the first function because it doesn't appear to break the functionality of the select-box at all, it just delays it. Using these javascript functions can help you prevent some of the side effects that come with using the javascript onchange event with a select-box.

Update NOV-29-2006

Internet Explorer 7 treats scrolling differently than previous versions of Internet Explorer. Instead of scrolling a select-box if the user has set their focus in that select-box IE7 also requires the user's mouse to be on top of the select-box in order to scroll through the options there. This prevents accidental scrolling but still allows the user to scroll through the select-box if they have it focused and have their mouse pointer above the select element.

Firefox 2.0 also treats scrolling differently than previous versions of the browser by not allowing scrolling in any select-boxes.

0 comments for this article.

del.icio.us logo add this article to del.icio.us! Other great Web Development and Programming articles on Netlobo.com:
Disable Form Buttons and Other Elements with Javascript
Applying Object Oriented Programming to PHP
Managing Multiple Javascript window.onload Functions