activate select menu on hover/mouseover using select2

Question

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

Duplicate of [this](http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due) and [this](http://stackoverflow.com/questions/360431/can-i-open-a-dropdownlist-using-jquery) — Mohammad, Jun 14 '16 at 10:21

Vagharsh · Accepted Answer · 2016-06-14T12:10:14.697

5

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

edited Jun 14 '16 at 12:10

answered Jun 14 '16 at 10:39

Vagharsh

396
1
6

only issue is that it will close without letting me click one of the list items. I tried to change the `"close"` part to `$("#myselect-selected").select2("close");` but it didn't work - please see [plnk](http://plnkr.co/edit/GTeyWfOp9aTd1B0Be0Hs?p=preview) for live example – alexc Jun 14 '16 at 10:49

score 1 · Answer 2 · answered Sep 20 '17 at 21:13

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

activate select menu on hover/mouseover using select2

2 Answers2

Linked