jQuery 在悬停时触发单击选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12622191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger click on select box on hover
提问by daGUY
I'm trying to have a selectbox automatically pop open when the use hovers over it, as if they had clicked it. Is this possible?
我试图让一个select盒子在用户悬停在它上面时自动弹出，就好像他们点击了它一样。这可能吗？
I would think I could do this easily with jQuery...
我想我可以用 jQuery 轻松做到这一点......
$("#settings-select").mouseover(
function(){
$(this).trigger("click");
}
);
But that does nothing. Any ideas?
但这没有任何作用。有任何想法吗？
回答by daGUY
I finally got this to work! You need Chosen; as others have pointed out, you can't do this with a normal selectbecause there are no events available to use. But this will pop open the menu when you mouseover the selectand close it when you mouseout, which is the exact effect I wanted.
我终于让这个工作了！你需要选择; 正如其他人指出的那样，你不能用正常的来做到这一点，select因为没有可用的事件。但这会在您将鼠标悬停在 上时弹出菜单并在鼠标select移开时关闭它，这正是我想要的效果。
HTML:
HTML：
<select id="dropdown" data-placeholder="Choose…">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</select>
JS:
JS：
$("#dropdown").chosen().next(".chzn-container").hover(
function(){
$("#dropdown").trigger("liszt:open");
},
function(){
$(this).trigger("click");
}
);
$("#dropdown").trigger("liszt:open");is what opens the menu. There is no equivalent liszt:closeevent to trigger when you want to close it (as far as I know), but triggering a clickon it instead has the same effect.
$("#dropdown").trigger("liszt:open");是什么打开菜单。liszt:close当您想关闭它时（据我所知），没有可触发的等效事件，但click在其上触发 a具有相同的效果。
回答by Shikkediel
It's been a while but there is a solution I don't see here, using hoverto change the length of select:
已经有一段时间了，但有一个我在这里看不到的解决方案，hover用于更改的长度select：
$('select').hover(function() {
$(this).attr('size', $('option').length);
}, function() {
$(this).attr('size', 1);
});
http://codepen.io/anon/pen/avdavQ
http://codepen.io/anon/pen/avdavQ
And here's a pen where it's a bit more than the bare necessity and has some styling :
这是一支笔，它不仅仅是必需品，而且有一些造型：
回答by Denys Séguret
triggeronly call the functions bound via one of the binding functions of jQuery.
trigger只调用通过 jQuery 的绑定函数之一绑定的函数。
There is no cross-browser way to open a select from javascript (it mightbe possible to call this.click()on some versions of IE but I can't test, and I'm sure there is no way on other browsers).
没有跨浏览器的方式来打开 javascript 中的选择（可能可以this.click()在某些版本的 IE 上调用，但我无法测试，我确定在其他浏览器上没有办法）。
回答by Nitin Dhomse
Working Example
工作示例
$(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>回答by Turcia
回答by user2725321
Unfortunately the method with Chosen - did not work for me.
不幸的是，Chosen 的方法对我不起作用。
But I thought I could make my own selector on jQuery.
但我想我可以在 jQuery 上制作我自己的选择器。
HTML:
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:
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
});
