OnBlur effect for select dropdown

Question

I have a select dropdown and if a user clicks 'outside' of that select dropdown, I want it to disappear. This is what I currently have:

$(this).html($("<select/>", {
  id: 'sel',
  change: function() {
    selectdone(this, title_id, status_type);
  },
  blur: function() {
    selectdone(this, title_id, status_type);
  },

In the above, if I click outside of the dropdown, nothing happens. The only time the function is firing is if I change the value of the select dropdown.

How would I accomplish the above, such that when a user clicks anywhere on the document outside of the select dropdown, it fires this function?

Not only what @elclanrs said, but if you click outside of the dropdown, the native action is for the dropdown to 'disappear' as you say. Unless you mean, you want it to go `display:none;` or `visibility:hidden;` or `opacity:0`. Could you rephrase the question so it actually addresses your issue? — Ohgodwhy, Jul 08 '12 at 23:05
@elclanrs in my situation, `blur` would never work here (I've tried putting an alert on it, and it never fires). The above function fires once and then finishes, and I think it will only even initaiate on `change` — David542, Jul 08 '12 at 23:14
[It works](http://jsfiddle.net/elclanrs/mreCa/). Your problem must be what **Jared Farrish** said. — elclanrs, Jul 08 '12 at 23:27
@David542 if I've understood right you need a way to trigger a function every time the user clicks away from the dropdown menu in the selectbox? — tftd, Jul 08 '12 at 23:33
@elclanrs - I don't know if that's the case (my objection was more "WTW" as in "wallaby"), since the reference should to the actual element, not by any `id`. I think it's indicative, but not proscriptive, of the problem. Unless you can demonstrate otherwise. — Jared Farrish, Jul 08 '12 at 23:43
I think his issue may be that clicking on the select expands the options, but a subsequent click on the body (or other element) only hides those options and does not trigger the blur or change events. [Fiddle](http://jsfiddle.net/X8kwn/). An expanded select appears to require 2 clicks elsewhere to trigger the blur event. — Brandon Boone, Jul 08 '12 at 23:55
@BrandonBoone right this is the problem I am having -- it is requiring two clicks for the action to trigger the blur event. Do you know how I would fix this? — David542, Jul 09 '12 at 21:56
@JaredFarrish I changed this to a class but it did not change anything (see comment above). — David542, Jul 09 '12 at 21:57
@David542 - See my more descriptive comment; using a `class` instead of an `id` in this case is correct, but as I noted, not probably the underlying problem. `id` values should always be unique on the page at any given time, so those should be unique; when grouping, use `class`es. — Jared Farrish, Jul 10 '12 at 22:33

score 2 · Accepted Answer · edited May 23 '17 at 10:09

I don't think this is possible. As pointed out in another answer, it appears that the active <select> is prohibiting other input from being accepted.

See my updated fiddle. Notice that when you click the background you get the alert test when the select isn't expanded. When it is expanded and you click off, the alert doesn't fire. This appears to be the default behavior of the browser. It appears to be ignoring all other inputs (mouse movements included) while the select is activated.

I was, however, able to get your event to fire for any selected element by setting the selectedIndex to -1. This way any valid option will result in a change.

Example

$(function(){    
    var title_id = '', status_type = ''; 
    $('body').html(
        $("<select/>", {
            id: 'sel',
            change: function() {
                selectdone(this, title_id, status_type);
            },
            blur: function() {
                selectdone(this, title_id, status_type);
            }
        })
        .append($('<option />', { 'text':'one'}))
        .append($('<option />', { 'text':'two'}))
    );

    $('#sel').prop('selectedIndex', -1); 
});

function selectdone(element, titleid, statustype){
    $(element).hide().prop('selectedIndex', -1); 
}

OnBlur effect for select dropdown

1 Answers1

Example