上悬停选择框触发点击(Trigger click on select box on hover)

我想有一个select的时候使用悬停在框会自动弹开，因为如果他们点击它。 这可能吗？

我想我可以用jQuery做到这一点很容易...

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

但是，什么也不做。 有任何想法吗？

Answer 1:

我终于得到了这个工作！ 你需要选上 ; 正如其他人指出的那样，你不能用正常的做到这一点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就可以了，而不是有同样的效果。

Answer 2:

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

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

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

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

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

而且这里有一个猪圈里它比裸需要多一点，有一些造型：

演示

Answer 3:

触发仅经由呼叫的jQuery的的结合功能之一结合的功能。

没有跨浏览器方式打开从JavaScript中的选择（有可能调用this.click()在IE浏览器的一些版本，但我无法测试，我肯定是没有办法在其他浏览器） 。

Answer 4:

这是不可能的。 你只能实现自己的选择框，或选的插件，但是这是不好的可用性。 想想也是trigger('focus')

Answer 5:

不幸的是有选择的方法 - 没有为我工作。

但我认为我可以做我自己的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

文章来源: Trigger click on select box on hover