Trigger click on select box on hover

Question

I'm trying to have a select box automatically pop open when the use hovers over it, as if they had clicked it. Is this possible?

I would think I could do this easily with jQuery...

$("#settings-select").mouseover(
    function(){
        $(this).trigger("click");
    }
);

But that does nothing. Any ideas?

Answer 1

I finally got this to work! You need Chosen; as others have pointed out, you can't do this with a normal select because there are no events available to use. But this will pop open the menu when you mouseover the select and close it when you mouseout, which is the exact effect I wanted.

HTML:

<select id="dropdown" data-placeholder="Choose&hellip;">
    <option value="one">Option 1</option>
    <option value="two">Option 2</option>
    <option value="three">Option 3</option>
</select>

JS:

$("#dropdown").chosen().next(".chzn-container").hover(
    function(){
        $("#dropdown").trigger("liszt:open");
    },
    function(){
        $(this).trigger("click");
    }
);

$("#dropdown").trigger("liszt:open"); is what opens the menu. There is no equivalent liszt:close event to trigger when you want to close it (as far as I know), but triggering a click on it instead has the same effect.

Answer 2

It's been a while but there is a solution I don't see here, using hover to change the length of select :

$('select').hover(function() {

  $(this).attr('size', $('option').length);
}, function() {

  $(this).attr('size', 1);
});

http://codepen.io/anon/pen/avdavQ

And here's a pen where it's a bit more than the bare necessity and has some styling :

Demo

Answer 3

trigger only call the functions bound via one of the binding functions of jQuery.

There is no cross-browser way to open a select from javascript (it might be possible to call this.click() on some versions of IE but I can't test, and I'm sure there is no way on other browsers).