触发器单击悬停时的选择框

Posted 2021-04-14

我正试图让一个select盒子在用品盘旋时自动弹出，好像他们点击了它一样。这可能吗？

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

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

但这没有任何作用。有任何想法吗？

答案

我终于开始工作了！你需要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具有相同的效果。

另一答案

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

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

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

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

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

这里有一支笔，它不仅仅是一种必需品，还有一些造型：

Demo

另一答案

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

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

另一答案

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

另一答案

不幸的是，选择方法 - 对我来说不起作用。

但我想我可以在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