Question

我有一个选择选项，点击时效果很好。现在，我希望当鼠标悬停在该选择选项上时，该选择选项将打开。

我的html是：

 <select name="select" id="inputselect" class="form-control">
  <?php
    $i=1;
    for($i=1; $i<=10; $i++){ ?>
    <option value="<?=$i?>">option_<?=$i?></option>
    <?php    }
    ?>
  </select>

  // script will be like this
  $('#inputselect').mouseover(function(event){
     // code for open the select option on mouse hober
  });

预先感谢

Answer 1

尝试一下-

$('#inputselect').mouseover(function(event){
 $('#inputselect').show();
 $('#inputselect')[0].size= $('#inputselect option').length;
});

$('#inputselect').mouseout(function(event){
 $('#inputselect').show();
 $('#inputselect')[0].size=1;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <select name="select" id="inputselect" class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</div>

Answer 2

您可以在Trigger click on select box on hover进行检查。您需要为此选择。

HTML：

<select id="dropdown" data-placeholder="Mouseover">
    <option value="one">Option 1</option>
    <option value="two">Option 2</option>
    <option value="three">Option 3</option>
</select>

JS：

$("#dropdown").chosen().next(".chosen_container").hover(
    function(){
        $("#dropdown").trigger("liszt:open");
    },
    function(){
        $(this).trigger("click");
    }
);

Answer 3

请参阅下面的代码段。如果您有任何qns，请在评论中告诉我。

$('select').hover(function() {

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>first</option>
  <option>second</option>
  <option>third</option>
</select>

如何在鼠标悬停时打开选择选项

3 个答案: