Skip to content Skip to sidebar Skip to footer

Activate Select Menu On Hover/mouseover Using Select2

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

Solution 1:

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

Solution 2:

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

Post a Comment for "Activate Select Menu On Hover/mouseover Using Select2"