Menu
I am having really hard time with this. Can someone please help?
I want to have native dropdown kick in for Mobile Devices
http://jsfiddle.net/4UjVr/4/
Docs: http://silviomoreto.github.io/bootstrap-select/#mobile
$(function() {
$('#desktop').selectpicker({
container: 'body'
});
});<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/120557/Expires/12-2014/bootstrap-select.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet" />
<select id="desktop" data-live-search="true">
<option>cow</option>
<option>bull</option>
<option>cow</option>
<option>Test2</option>
<option>Tes3</option>
<option>Tes4</option>
<option class="get-class" disabled>ox</option>
<optgroup label="test" data-subtext="another test" data-icon="icon-ok">
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</optgroup>
</select>I want to have native dropdown kick in for Mobile Devices
821
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
. selectpicker('refresh') To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.
.selectpicker('destroy') To programmatically destroy the bootstrap-select, use the destroy method. $('. selectpicker'). selectpicker('destroy');
Bootstrap Select is a form control that shows a collapsable list of different values that can be selected. This can be used for displaying forms or menus to the user.
This seems to do the trick.
$(function () {
$('#desktop').selectpicker({
container: 'body'
});
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$('#desktop').selectpicker('mobile');
}
});<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/120557/Expires/12-2014/bootstrap-select.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet" />
<select id="desktop" data-live-search="true">
<option>cow</option>
<option>bull</option>
<option>cow</option>
<option>Test2</option>
<option>Tes3</option>
<option>Tes4</option>
<option class="get-class" disabled>ox</option>
<optgroup label="test" data-subtext="another test" data-icon="icon-ok">
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</optgroup>
</select>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