jQuery jQuery通过按钮打开选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19432610/
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
jQuery open select by button
提问by kicaj
How to open select dropdown by button?
如何通过按钮打开选择下拉菜单？
$('button').on('click', function() {
$('select').trigger('click');
});
My code: http://jsfiddle.net/UGkWp/
我的代码：http: //jsfiddle.net/UGkWp/
UPDATE:
I found solutions for webkit browsers, but only these browsers: http://jsfiddle.net/UGkWp/2/Maybe You known how do this in each browsers?
更新：
我找到了 webkit 浏览器的解决方案，但只有这些浏览器：http: //jsfiddle.net/UGkWp/2/也许你知道如何在每个浏览器中做到这一点？
回答by laurent belloeil
(function($) {
"use strict";
$.fn.openSelect = function()
{
return this.each(function(idx,domEl) {
if (document.createEvent) {
var event = document.createEvent("MouseEvents");
event.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
domEl.dispatchEvent(event);
} else if (element.fireEvent) {
domEl.fireEvent("onmousedown");
}
});
}
}(jQuery));
$('#country').openSelect();
回答by Said Suleiman Juma
You can do it with only CSS like this:
你可以只用 CSS 来做到这一点：
<html>
<body>
<div class="sorting">
<div class="sort right"><label>
<span>Items per page</span>
<select>
<option value="">Items per page</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="40">40</option>
<option value="60">60</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
<span class="pointer"><i class="fa fa-caret-down"></i></span>
</label>
</div>
</div>
</body>
</html>
<style>
select{
-webkit-appearance:none;
appearance:none;
-moz-appearance:none;
}
.sorting{
padding:5px 10px;
border:1px solid #eee;
clear:both;
background:#FFF;
height:40px;
}
.sorting h4{
padding:4px 0 0;
margin:0;
}
.sort{
position:relative;
padding-left:10px;
float:left;
}
.sort>label{
font-weight:normal !important
}
.sort span.pointer{
height:30px;
width:30px;
border-left:1px solid #ddd;
position:absolute;
right:0;
top:0;
text-align:center;
color:#c49633;
font-size:20px;
z-index:1;
}
.sort span.pointer i{
margin-top:6px;
}
.sorting select{
padding:5px 40px 5px 10px !important;
margin-left:10px;
border:1px solid #eee;
background:none;
height:30px;
position:relative;
z-index:2;
}
</style>
Visit this fiddle for more details: https://jsfiddle.net/ssjuma/1mkxw2nb/1/
访问此小提琴了解更多详情：https: //jsfiddle.net/ssjuma/1mkxw2nb/1/
回答by user2849406
I think you should have a look at this page:
我想你应该看看这个页面：
Can I open a dropdownlist using jQuery
It seems like it is not possible to do this directly, but tools exists to emulate what you are trying to do.
似乎无法直接执行此操作，但是存在可以模拟您尝试执行的操作的工具。
An easy solution would be to use the "chosen"-plugin for jquery: http://harvesthq.github.io/chosen/
一个简单的解决方案是为 jquery 使用“选择”插件：http://harvesthq.github.io/chosen/
This also gives you some great advantages over normal selects, and its easy to use.
这也为您提供了一些优于普通选择的巨大优势，并且易于使用。
On this you can simply fire a "mousedown" event like the following:
在此您可以简单地触发“鼠标按下”事件，如下所示：
$('#dropdown_id_chzn').trigger('mousedown')
Given you have chosen (and jquery) enabled on your page the following code should do the trick:
鉴于您已选择（和 jquery）在您的页面上启用，以下代码应该可以解决问题：
HTML:
HTML：
<select name="foo">
<option value="1">Bar</option>
</select>
JavaScript:
JavaScript：
$('select[name="foo"]').chosen();
$('#foo_chzn').trigger('mousedown');
Notice that chosen automatically appends the "_chzn" to your dropdown-name, which is what you should use in your selector
请注意， selected 会自动将“_chzn”附加到您的下拉列表名称，这是您应该在选择器中使用的
回答by Lyle Bennett
I found a great solution here: https://stackoverflow.com/a/18284923/8472295
我在这里找到了一个很好的解决方案：https: //stackoverflow.com/a/18284923/8472295
In your case you can wrap the button in a label and apply the same solution.
在您的情况下，您可以将按钮包裹在标签中并应用相同的解决方案。
HTML
HTML
<label for="orderby">
<button type="button">
<span>Sort</span>
</button>
</label>
<select id="orderby" name="orderby" class="orderby" aria-label="Sort By">
<option value="date" selected="selected">Latest</option>
<option value="popularity">Popularity</option>
<option value="rating">Average rating</option>
<option value="price">Price: low to high</option>
<option value="price-desc">Price: high to low</option>
</select>
JS
JS
$("label").mouseover(function(){
var $this = $(this);
var $input = $('#' + $(this).attr('for'));
if ($input.is("select") && !$('.lfClon').length) {
var $clon = $input.clone();
var getRules = function($ele){ return {
position: 'absolute',
left: $ele.offset().left,
top: $ele.offset().top,
width: $ele.outerWidth(),
height: $ele.outerHeight(),
opacity: 0,
margin: 0,
padding: 0
};};
var rules = getRules($this);
$clon.css(rules);
$clon.on("mousedown.lf", function(){
$clon.css({
marginLeft: $input.offset().left - rules.left,
marginTop: $input.offset().top - rules.top,
});
$clon.on('change blur', function(){
$input.val($clon.val()).show();
$clon.remove();
});
$clon.off('.lf');
});
$clon.on("mouseout.lf", function(){
$(this).remove();
});
$clon.prop({id:'',className:'lfClon'});
$clon.appendTo('body');
}
});
Demo: http://jsfiddle.net/Yh3Jf/24/
演示：http: //jsfiddle.net/Yh3Jf/24/
The js creates a clone of the select element which updates the original.
js 创建了更新原始元素的 select 元素的克隆。
Tested and works for me, in my case I used it to hide the select field with css, then the button triggers a drop down where a selection can be made.
经过测试并适合我，在我的情况下，我用它来隐藏带有 css 的选择字段，然后按钮触发一个下拉菜单，可以在其中进行选择。
回答by edo4hy
This worked for me
这对我有用
$('select').focus();
$('选择').focus();
回答by Shivam
hope this help
希望这有帮助
<select id="s">
<option>aaaaa</option>
<option>bbbbb</option>
<option>ccccc</option>
</select>
<button>button</button>
$("button").click(function () {
var size = $('#s option').size();
if (size != $("#s").prop('size')) {
$("#s").prop('size', size);
} else {
$("#s").prop('size', 1);
}
})
