jQuery Plugin To Convert Bootstrap Select Into Dropdown Button

File Size: 8.97 KB
Views Total: 4400
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

iconTemplate: '<span class="caret"></span>'

4. Customize the dropdown button.

  templateIcon:                '<span class="caret"></span>',
  templateSearchInput:         '<input class="form-control" placeholder="Search">',
  templateSearchNoResultsText: 'No results found',
  classButtonStyle:            'btn-default',
  minItemsForSearch:           Infinity

Change log:


  • update focus on select 


  • update button text on change
  • remove deprecated option


  • 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.