I've been looking around the documentation to try find a way to easily activate the select menu on hover, and not only on click.

Unfortunately, I cannot seem to find the way to do it (if it exists), and was hoping someone could point me in the right direction?

Here is a plnk,

Thanks all

I've been looking around the documentation to try find a way to easily activate the select menu on hover, and not only on click.

Unfortunately, I cannot seem to find the way to do it (if it exists), and was hoping someone could point me in the right direction?

Here is a plnk,

http://plnkr.co/edit/GTeyWfOp9aTd1B0Be0Hs?p=preview

Thanks all

• javascript
• jquery
• jquery-select2

• Duplicate of this and this – Mohammad Commented Jun 14, 2016 at 10:21

2 Answers 2

Try this:

$("#myselect").next(".select2").mouseenter(function() {
    $("#myselect").select2("open");
});
$(document).on("mouseleave", ".select2-container", function(e) {
    if ($(e.toElement || e.relatedTarget).closest(".select2-container").length == 0) {
        $("#myselect").select2("close");
    }    
});

My generic solution to open and close select2 on mouseenter and mouseleave

$(document).on('mouseenter', '.select2-container', function(e) {
    $(this).prev("select").select2("open");
});

$(document).on('mouseleave', '.select2-container .select2-dropdown', function(e) {
    var selectId = $(this).find("ul").attr('id').replace("select2-", "").replace("-results", "");
    $("#"+selectId).select2("close");
});