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?
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/
(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 loop $(domEl).focus(); –
Estelaestele 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/
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:
HTML:
<select name="foo">
<option value="1">Bar</option>
</select>
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
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);
}
})
$('#s option').size(); causes error use: $('#s option').length; –
Cyruscyst I found a great solution here: https://mcmap.net/q/720521/-once-i-click-on-label-select-button-should-get-open
In your case you can wrap the button in a label and apply the same solution.
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');
}
});
Demo: http://jsfiddle.net/Yh3Jf/24/
The js creates a clone of the select element which updates the original.
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.
You certainly don't need a two different elements to achieve this, if what you want it a button that on click, toggles open the options.
You only need a select element then you remove the drop arrow from the select element using css.
Check it out here
.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>I think this will help you..
$('button').on('click', function() {
$('select').trigger('click');
});
$('select').click(function(){
alert($(this).val());
});
Fiddle Here
© 2022 - 2024 — McMap. All rights reserved.