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"