How do I make a select .change event not fire until it loses focus (using jquery preferably)?

Question

I have a select box using the dropdownchecklist jquery plug-in. I want to have a change event fire only after the select box loses focus.

The jquery .change event fires for select boxes immediately upon selecting an item in the list. In my case since multiple items can be selected I only want the change to fire after focus is lost assuming new items were even selected.

I thought I could do some sort of chaining like $('#MySelect').change().blur(...) or some kind of nesting or something, but I couldn't really get it to work like I'd expect.

Any ideas?

Answer 1

Well the change event is fired when the dropdown list changes. You cannot change that (what a funny sentence in that context).
You have to set up your code such that all your functionality that should normally be executed on the change gets executed on the blur event.

Update: If you provide some code and explanation what should executed when, it would be easier to help you.

Answer 2

Maybe you want to simply provide a handler for the blur event and ignore the change event altogether. You will then have to track changes yourself. One suggestion is to have the change event simply update a variable that tells you that changes took place without doing anything else. Then the blur event could do this:

 $('#yourselect').blur(function(){
     if(changesOccurred){
        //do something about it
        changeOccurred = false;
     }

 });


 $('#yourselect').change(function(){
     changeOccurred = true;
});

Answer 3

You should be able to do this.

$('select').focus(function() {
    $(this).data( 'startValue', $(this).val() );
}

$('select').change(function(event) {
    event.preventDefault();
});

$('select').blur(function() {
    if ( $(this).data('startValue') == $(this).val() ) {
        //nothing has changed
    } else {
        //something's different
    }
}