Trigger click on select box on hover

问题

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?

回答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.

回答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

回答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).

回答4:

This is not possible. You can only implement your own select-box, or Chosen plugin, but this is bad for usability. Also think about trigger('focus').

回答5:

Unfortunately the method with Chosen - did not work for me.

But I thought I could make my own selector on jQuery.

HTML:

<div class='select'>
  <p class='input'>Select option</p>
  <input type='hidden' name='some_name_to_form' />
  <div class='hidden'>
    <p value='id_1' >option long value</p>
    <p value='id_2' >option 2</p>
    <p value='id_3' >option 3</p>
  </div>
</div>

JS:

$('.hidden p').click(function(){
  $(this).closest('.select').find('.input').text($(this).text());
  $(this).closest('.select').find('input').val($(this).attr('value'));
  $(this).closest('.select').trigger("change");
});

$('.select').change(function(){
  // ... do stuff
});

https://codepen.io/qwer643/pen/LebKpo

回答6:

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>

来源：https://stackoverflow.com/questions/12622191/trigger-click-on-select-box-on-hover