如何在鼠标悬停时打开选择选项[重复]答案

【问题标题】：How can I open a select options on mouse hover [duplicate]如何在鼠标悬停时打开选择选项[重复]
【发布时间】：2020-02-26 05:56:43
【问题描述】：

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

我的 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
  });

提前致谢

【问题讨论】：

试试$('#inputselect').trigger('mousedown')
@DevsiOdedra 我是这个平台的新手，你能给我完整的脚本吗？

标签： javascript jquery html

【解决方案1】：

看下面的sn-p。如果你有任何qns，请在cmets中告诉我。

$('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>

【讨论】：

这个正在工作 :) 谢谢
如果您对我的回答感到满意，请为我的回答投票。

【解决方案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");
    }
);

【讨论】：

出现控制台错误：“selectOption.php:51 Uncaught TypeError: $(...).chosen is not a function”
你应该投票关闭作为基本相同的东西的副本
我是这个平台的新手，我不明白你的意思
@Phong 谢谢。会记住这一点。
@Trader9Hasan 那是因为插件/js没有添加/添加成功。 stackoverflow.com/questions/15024764/plug-in-does-not-load/…>查看这个链接，先尝试搜索一下，这些问题已经有答案了。

【解决方案3】：

试试这个 -

$('#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>

【讨论】：