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?

Answer 1

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); 
}