kic*_*caj 10 jquery select triggers click
如何通过按钮打开选择下拉列表？
$('button').on('click', function() {
$('select').trigger('click');
});
我的代码:http://jsfiddle.net/UGkWp/
更新:
我找到了webkit浏览器的解决方案,但只有这些浏览器:http://jsfiddle.net/UGkWp/2/也许你知道在每个浏览器中这是怎么做的？
(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();
小智 7
你可以用这样的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/
希望这有帮助
<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);
}
})
| 归档时间： |
|
| 查看次数： |
57519 次 |
| 最近记录： |