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.