Revision history [back]

Unfortunately, it's not possible to trigger the opening of a Select2 dropdown menu using mouse hover. The Select2 documentation shows that the dropdown can only be opened via a mouse click or keyboard event.

However, you might be able to achieve a similar effect using CSS and JavaScript. You could add a hover event to the Select2 input element that applies a CSS class to the container element, and then use that class to show the dropdown via JavaScript. Here's some rough code to get you started:

// Add hover event to Select2 input element
$('.select2-selection--single').hover(function() {
    // Apply CSS class to container element
    $(this).parents('.select2-container').addClass('hovered');
}, function() {
    // Remove CSS class when hover is finished
    $(this).parents('.select2-container').removeClass('hovered');
});

// Show dropdown when container element is hovered
$('.select2-container.hovered .select2-selection--single').click();

// Hide dropdown when mouse leaves container element
$('.select2-container.hovered').mouseleave(function() {
    $(this).removeClass('hovered');
    $('.select2-container.hovered .select2-selection--single').click();
});

Note that this code is untested and might require some modification to work for your specific use case. Additionally, this approach might not work in all browsers or with all versions of Select2, so be sure to test thoroughly.