悬停时触发单击选择框答案

【问题标题】：Trigger click on select box on hover悬停时触发单击选择框
【发布时间】：2012-09-19 06:53:02
【问题描述】：

我试图让select 框在用户悬停在它上面时自动弹出，就像他们点击它一样。这可能吗？

我想我可以用 jQuery 轻松做到这一点...

$("#settings-select").mouseover(
    function(){
        $(this).trigger("click");
    }
);

但这无济于事。有什么想法吗？

【问题讨论】：

标签： jquery click hover mouseover drop-down-menu

【解决方案1】：

我终于搞定了！你需要Chosen;正如其他人指出的那样，您不能使用普通的select 执行此操作，因为没有可用的事件。但这会在您将鼠标悬停在select 上时弹出菜单并在您鼠标移出时将其关闭，这正是我想要的效果。

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"); 是打开菜单的地方。当您想关闭它时（据我所知），没有等效的 liszt:close 事件可以触发，但是在其上触发 click 具有相同的效果。

【讨论】：

谢谢。更优雅的解决方案是将$("#dropdown").trigger("liszt:open"); 更改为$(this).prev('select').trigger("liszt:open");

【解决方案2】：

已经有一段时间了，但这里有一个我没有看到的解决方案，使用hover 更改select 的长度：

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

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

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

http://codepen.io/anon/pen/avdavQ

这是一支笔，它不仅仅是必需品，而且有一些样式：

Demo

【讨论】：

我尝试使用您的解决方案添加一个值，但它不起作用。
尝试使用您的演示并插入value=... 供您选择
是的，它工作正常...抱歉，昨天我尝试添加一些 value= 并且 onhover 不起作用（没有打开下拉菜单）。

【解决方案3】：

trigger 只调用通过 jQuery 的绑定函数之一绑定的函数。

没有跨浏览器的方式从 javascript 打开选择（它可能可以在某些版本的 IE 上调用 this.click()，但我无法测试，我确定在其他浏览器上没有办法）。

【讨论】：

你在考虑 triggerHandler() 吗？ trigger() 也会触发原生事件。
我认为它不会触发原生事件。 "对于普通对象和 DOM 对象，如果触发的事件名称与对象上的属性名称匹配，如果没有事件处理程序调用 event.preventDefault()，jQuery 将尝试将该属性作为方法调用"我>。那是不同的。
啊，对了，你的最后一句话很到位：选择没有点击方法。
事实上有一个，至少在 Chrome 和 IE 上是这样。但它与单击选择不同（我在 Chrome 上尝试过）。

【解决方案4】：

这是不可能的。您只能实现自己的选择框或Chosen 插件，但这不利于可用性。还要考虑trigger('focus')。

【讨论】：

实际上，我正在使用 Chosen。这是否使它更容易/可能？
这使它成为可能，但更容易。由于已选择将 selectbox 替换为 div 元素，因此您可以操纵事件。 Chosen 可能有自己的 _show() 和 _hide() 函数，因此像 $(".chzn-container").mouseover(unknown_chosen_function()); 这样的东西可能有效，也可能无效:)
hm...该函数似乎被称为Chosen.prototype.results_show，但我不知道如何正确触发它...
越来越近...触发 liszt:open on the Chosen select on mouseover 会弹出它打开，但由于某种原因，只有在 select 不活动时才有效。而且我还必须想办法在鼠标移出时关闭它...
Turcia：看看我自己的答案，看看我是如何解决这个问题的。您使用 Chosen 自己的事件的想法是正确的。

【解决方案5】：

很遗憾，Chosen 的方法对我不起作用。

但我认为我可以在 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】：

工作示例

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

【讨论】：