How do I force a blur event to occur in JavaScript?

Here's what I want to do. I want to trigger an event every time a select element changes. I have a multiline sele开发者_运维百科ct and when I make changes (click on elements), it does not change until the select box loses focus. So I'm trying to force a blur every time the select box is clicked. That way if it changes, it will trigger the changed event. If it doesn't change, nothing will happen.

How do I do this? Am I even approaching this the right way? Jquery answers are okay as well.

In addition to Ender the full code could be something like this.

$('#mySelectBox').change(function() {
    $('#thingToBlur').blur();
})

Reference: http://api.jquery.com/blur/

This will find the element with the focus and trigger the blur event.

function blur(){
    document.querySelectorAll('input,textarea').forEach(function(element){
        if(element === document.activeElement) {
            return element.blur();
        }
    });
}

Using jQuery do:

$('#mySelectBox').change(function() {
   //do things here
});

According to the documentation at http://api.jquery.com/change/, the event is triggered immediately when the user makes a selection.

Check out this demo to verify that this works: http://jsfiddle.net/AHM8j/

You could attach an onclick handler to the select and the individual options. basically onclick="this.blur();". I've always found that click events on <select> elements to be a pain, as nothing happens at the point you expect it to.

Okay, Here's what was going on. I was including the -vsdoc version of JQuery instead of the actual JQuery library. This also fixes some issues I was having with some plugins such as blockUI.