Search code examples
jqueryselectfocusblur

How to blur <SELECT> in 1 click when click another?

I can blur <SELECT> when option selected by .change()

But how can I blur <SELECT> when <SELECT> open and click another element or <BODY> ?

Normally we have to click <BODY> 2 times to blur <SELECT> element right ?

How can I do only one click ?

$("select").focus(function () {
    $("code").html("focus");
}).blur(function () {
    $("code").html("blur");
});


$("select").change(function(){
    $("select").blur();
});

Why I can't do like..

$("*:not(select)").click(function(){
    $("select").blur();
});

I just only need to detect is <SELECT> open or close

Demo : http://jsbin.com/owitot/1/edit (try to open select box and click body)

Solution

  • The problem is that the first click only closes the select element, it doesn't unfocus it. So to solve you problem, you should catch the close event and then do:

    $("select").blur(); // This will even call your event listener!

    But how to catch the close event? Unfortunately, there is no such (official) event. But perhaps this question helps: Is there a DOM event that fires when an HTML select element is closed?