Trigger click on select box on hover

click, drop-down-menu, hover, jquery, mouseover

Solution

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.

Problem

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?

Original source