将鼠标悬停在选择上可打开所有选项 [英] Hovering over an select open all options

问题描述

现在在我的站点中，我有一个带有几个选项的选择，当我单击它时，选择已打开，并且看到所有选项，是否有任何方法可以使鼠标悬停而不是单击?

right now in my site I have a select with few options, when I click on it that select is open and see all options is there any way to made it on hover instead click?

<div class="control">
<select id="limiter" class="limiter-options" data-role="limiter">
<option value="24" selected="selected"> 24 per page </option>
<option value="48"> 48 per page </option>
<option value="72"> 72 per page </option>
<option value="all"> All per page </option>
</select>
</div>

我尝试了此脚本，但显示效果不佳:

I try this script but is not display well:

jQuery('#limiter').hover(function() {

  jQuery(this).attr('size', jQuery('option').length);
}, function() {

  jQuery(this).attr('size', 1);
});

推荐答案

$("#limiter").mouseover(function(){
  $(this)[0].size=$(this).find("option").length;
});
$("#limiter").click(function(){
   $(this)[0].size=0;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control">
<select id="limiter" class="limiter-options" data-role="limiter">
<option >Please Select </option>
<option value="24" selected="selected"> 24 per page </option>
<option value="48"> 48 per page </option>
<option value="72"> 72 per page </option>
<option value="all"> All per page </option>
</select>
</div>

这篇关于将鼠标悬停在选择上可打开所有选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！