Menu
How to open select dropdown by button?
$('button').on('click', function() {
$('select').trigger('click');
});
My code: 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?
484
The jQuery :button selector selects the HTML button element and the input type="button" element. We don’t need to use the attribute type="button" to select the button element. It requires only to specify :button to select the button element. The syntax of jQuery :button selector is given below.
More Examples of jQuery Selectors Syntax Description $ ("*") Selects all elements $ (this) Selects the current HTML element $ ("p.intro") Selects all <p> elements with class="int ... $ ("p:first") Selects the first <p> element 8 more rows ...
Because :button is a jQuery extension and not part of the CSS specification, queries using :button cannot take advantage of the performance boost provided by the native DOM querySelectorAll () method. To achieve the best performance when using :button to select elements, first select the elements using a pure CSS selector, then use.
To submit the form, it contains the button element. After selecting the button, jQuery applies the background color as ‘yellow’ to the button. However, you can also apply other effects to the button using jQuery. In addition to the above button element, the selector also select the input element with type="button".
You can do it with only CSS like this:
<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/
120
(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();
http://jsfiddle.net/yqs90jdw/
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
