A custom select/multiselect for Bootstrap using button dropdown, designed to behave like regular Bootstrap selects.

See Bootstrap 3 examples here and here.

• Silvio Moreto
• Ana Carolina
• caseyjhol
• Matt Bryson
• t0xicCode

• Added option for custom caret icon class
• Added option for thumbnails in <option>
• Added title for <option> element
• Added aria-hidden="true" for all icons
• Added logic to sync disabled state on 'change' event
• Changed cursor for optgroup headers to 'default'
• Suppressed checkmark element if not multi-select
• Decoupled iconBase class so you can mix and match
• Removed using <option> value as title (uses <select> title)
• Removed showContent option (add data attribute to show)
• Removed showIcon option (add data attribute to show)
• Removed showSubtext option (add data attribute to show)
• Minor code optimizations

Create your <select> with the .selectpicker class.

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

If you use a 1.6.3 or newer, you don't need to to anything else, as the data-api automatically picks up the <select>s with the selectpicker class.

If you use an older version, you need to add the following either at the bottom of the page (after the last selectpicker), or in a $(document).ready() block.

// To style only <select>s with the selectpicker class
$('select.selectpicker').selectpicker();

Or

// To style all <select>s
$('select').selectpicker();

If you want to use a custom caret icon:

// Set custom caret icon
$('select.selectpicker').selectpicker({
  caretIcon: 'fa fa-angle-down'
});

Check out the documentation for further information.

Copyright (C) 2013-2015 bootstrap-select

Licensed under the MIT license.