Trigger click on select box on hover

daGUY picture daGUY · Sep 27, 2012 · Viewed 23.8k times · Source

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

daGUY picture daGUY · Oct 1, 2012

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.