Закройте раскрывающийся список Bootstrap, содержащий активный элемент Select2 при размытии

Вы можете использовать этот обходной путь:

// initialize Select2 
$("#e1").select2().on('open', function () {
    $('#select2-drop-mask')
       .height($(window).height())
       .width($(window).width())
       .css('opacity', .1);
});


$(document).on('mousedown', '#select2-drop-mask', function () {
    $('.dropdown.open').removeClass('open');
});

ПОСМОТРЕТЬ JSFIDDLE

Хотя я на самом деле не знаком ни с twitter-bootstrap, ни с select2 (и не очень хорошо знаю JavaScript), я заметил, что select2 вставляет элемент с именем #select2-drop-mask, который захватывает mousedown- и touchstart-события и обрабатывает закрытие select2- падать:

mask.bind("mousedown touchstart", function (e) {
    var dropdown = $("#select2-drop"), self;
    if (dropdown.length > 0) {
        self=dropdown.data("select2");
        if (self.opts.selectOnBlur) {
            self.selectHighlighted({noFocus: true});
        }
        self.close();
    }
});

Если мы прикрепим те же самые события (простой click не будет работать) к document и убедимся, что выбранный элемент на самом деле является #select2-drop-mask (иначе bootstrap-tooltips 'toggle' будет вызываться дважды), кажется, что все ведет себя так, как вы хотите — раскрывающийся список twitter-bootstrap закрыт всякий раз, когда щелкают что-то за пределами элемента select2:

function closeBootstrapDropdown() {
    if ($(event.target).is('#select2-drop-mask')) {
        // toggle the twitter-bootstrap dropdown
        $('.dropdown.open .dropdown-toggle').dropdown('toggle');
    }
}

$(document).on('mousedown touchstart', closeBootstrapDropdown);

Вот http://jsfiddle.net/PwNpB/3/ — хотя кажется, что это работает, все еще кажется мне немного грязным, поэтому я надеюсь, что кто-то с реальным пониманием того, что здесь происходит и почему, вмешается.