🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Select To Button is a jQuery extension for Bootstrap that converts the default Bootstrap select list into a dropdown button.

Drop-Down-list Drop-Down

Documentation

Getting Started

This library requires Bootstrap and jQuery, include them as dependencies, then include the bootstrap select source file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="path-to-bootstrap-select.js"></script>

Initialize

The default settings should work for most projects.

$('#select').bootstrapSelectToButton();

If you require further customizations you'll have to set options. To see the full list of options, see $.fn.bootstrapSelectToButton.defaults.

Examples

Show search for 5 or more elements
$('#select').bootstrapSelectToButton({   minItemsForSearch: 5 });
Set button style
$('#select').bootstrapSelectToButton({   classButtonStyle: 'btn-primary' });

API

This library will listen to change events fired on the original select. To update the bootstrap button group, simply set properties on the original select using prop and call change.

Disable select

$('#select').prop('disabled', true).change();

Set option selected

$('#select option:eq(3)').prop('selected', true).change();

You May Also Like