A custom select for @twitter bootstrap using button dropdown (originally by Silvio Moreto).
Clone or download
Pull request Compare This branch is 19 commits ahead, 518 commits behind snapappointments:master.
Tom Doan
Latest commit 9e3861b Jan 11, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js Fix IE error with event.initEvent() Jan 11, 2016
LICENSE Fixed last two dates Jan 19, 2015
README.md Add title for <option> element Jul 15, 2015

README.md

bootstrap-select

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

Demo and Documentation

See Bootstrap 3 examples here and here.

Authors

Modifications by thdoan

  • 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

Usage

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 and License

Copyright (C) 2013-2015 bootstrap-select

Licensed under the MIT license.