jQuery Plugin To Convert Bootstrap Select Into Dropdown Button

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

How to use it:

1. Include the Font Awesome 4 for the custom caret icons (Optional).

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Include the Select To Button jQuery plugin after jQuery JavaScript.

<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="src/bootstrapSelectToButton.js"></script>

3. Call the bootstrapSelectToButton() function on the select element and set the custom caret icon.

$('select').bootstrapSelectToButton({
iconTemplate: '<span class="caret"></span>'
});

4. Customize the dropdown button.

$('select').bootstrapSelectToButton({
  templateIcon:                '<span class="caret"></span>',
  templateSearchInput:         '<input class="form-control" placeholder="Search">',
  templateSearchNoResultsText: 'No results found',
  classButtonStyle:            'btn-default',
  minItemsForSearch:           Infinity
});

Change log:

2015-12-18

• update focus on select 

2015-12-16

• update button text on change
• remove deprecated option

2015-12-14

• update styles and configs

---

This awesome jQuery plugin is developed by dubbs. For more Advanced Usages, please check the demo page or visit the official website.