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?

Solution 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.

Solution 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

Solution 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).

Solution 4

Working Example

    $(function(){
    $(".chosen-select").chosen();
        $(".chosen-container-single").hover(function(){
            $(this).addClass("chosen-with-drop");
            $(this).addClass("chosen-container-active");
            $('.chosen-select').trigger("chosen:open");
        },function(){
            $(this).removeClass("chosen-with-drop");
            $(this).removeClass("chosen-container-active");
        });
    });

      

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
    
<div>
<select data-placeholder="Choose a Country..." class="chosen-select"  style="width:350px;" tabindex="4">
            <option value=""></option>
            <option value="Any">[Any]</option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>

          </select>    
</div>

View more solutions

Comments

[Alex Feinman]

Are you thinking of triggerHandler()? trigger() also fires the native event.

[Denys Séguret]

I don't think it fires the native event. "For both plain objects and DOM objects, if a triggered event name matches the name of a property on the object, jQuery will attempt to invoke the property as a method if no event handler calls event.preventDefault()". That's different.

[Alex Feinman]

Ah, right, your last sentence nails it: selects don't have a click method.

[Denys Séguret]

In fact there is one, at least on Chrome and IE. But it doesn't do the same than a click on the select (I tried it on Chrome).

[daGUY]

I'm using Chosen, actually. Does that make it easier/possible?

[Turcia]

That makes it possible, but easier. Since Chosen replace selectbox with div element, you may manipulate events. Chosen probably have its own _show() and _hide() function, therefore something like $(".chzn-container").mouseover(unknown_chosen_function()); might work, or not :)

[daGUY]

hm...the function appears to be called Chosen.prototype.results_show, but I can't figure out how to trigger it properly...

[daGUY]

Getting closer...triggering liszt:open on the Chosen select on mouseover will pop it open, but for some reason that only works if the select isn't active. And I also have to figure out a way to close it on mouseout...

[daGUY]

Turcia: see my own answer to see how I solved this. You had the right idea using Chosen's own events.

[Turcia]

daGUY; it's nice to see you find a way to do it.

[He Shiming]

Thank you. And a more elegant solution would be to change $("#dropdown").trigger("liszt:open"); to $(this).prev('select').trigger("liszt:open");

[NineCattoRules]

I tried to add a value using your solution but it doesn't work.

[NineCattoRules]

try to use your demo and insert value=... for your options

[NineCattoRules]

Yes It works fine...sorry for that, yesterday I tried to add some value= and onhover didn't work (didn't open the dropdown).