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

Question

Here's what I want to do. I want to trigger an event every time a select element changes. I have a multiline select 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.

Answer 1

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.

Answer 2

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/

Answer 3

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

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

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

Answer 4

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.