如何通过按钮打开选择下拉菜单？
$('button').on('click', function() {
$('select').trigger('click');
});
我的代码：http://jsfiddle.net/UGkWp/
更新：
我找到了 webkit 浏览器的解决方案，但只有这些浏览器：http://jsfiddle.net/UGkWp/2/ 也许你知道在每个浏览器中是如何做到这一点的？
【问题讨论】：
标签： jquery select triggers click
希望有帮助
<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);
}
})
【讨论】：
$('#s option').size(); 导致错误使用：$('#s option').length;
我认为你应该看看这个页面：
Can I open a dropdownlist using jQuery
似乎无法直接执行此操作，但有工具可以模拟您尝试执行的操作。
一个简单的解决方案是使用 jquery 的“选择”插件： http://harvesthq.github.io/chosen/
与普通选择相比，这也为您提供了一些很大的优势，并且易于使用。
在此您可以简单地触发“mousedown”事件，如下所示：
$('#dropdown_id_chzn').trigger('mousedown')
鉴于您已在页面上选择（和 jquery）启用，以下代码应该可以解决问题：
HTML：
<select name="foo">
<option value="1">Bar</option>
</select>
JavaScript：
$('select[name="foo"]').chosen();
$('#foo_chzn').trigger('mousedown');
请注意，选择会自动将“_chzn”附加到您的下拉名称中，这是您应该在选择器中使用的内容
【讨论】：
我想这会对你有所帮助..
$('button').on('click', function() {
$('select').trigger('click');
});
$('select').click(function(){
alert($(this).val());
});
小提琴Here
【讨论】：
(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();
【讨论】：
each 循环的顶部$(domEl).focus();
你可以只用这样的 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>
访问这个小提琴了解更多详情：https://jsfiddle.net/ssjuma/1mkxw2nb/1/
【讨论】：
我在这里找到了一个很好的解决方案： https://stackoverflow.com/a/18284923/8472295
在您的情况下，您可以将按钮包装在标签中并应用相同的解决方案。
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
$("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');
}
});
演示： http://jsfiddle.net/Yh3Jf/24/
js 创建一个 select 元素的克隆，它会更新原始元素。
经过测试并为我工作，在我的例子中，我用它来隐藏带有 css 的选择字段，然后按钮触发一个可以进行选择的下拉菜单。
【讨论】：
你当然不需要两个不同的元素来实现这一点，如果你想要一个按钮，点击后打开选项。
您只需要一个选择元素，然后使用 css 从选择元素中删除下拉箭头。
看这里
.schedulAllselect {
appearance: none;
}<select id="" class="schedulAllselect">
<option value="">SCHEDULE ALL</option>
<option value="online" id="onlineOpt">Online Interview</option>
<option value="offline" id="offlineOpt">Offline Offline</option>
</select>【讨论】：