Skip to content

thdoan/bootstrap-select

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code
This branch is 19 commits ahead, 1127 commits behind snapappointments:main.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
js
 
 
 
 
 
 

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 (C) 2013-2015 bootstrap-select

Licensed under the MIT license.

About

A custom select for @twitter bootstrap using button dropdown (originally by Silvio Moreto).

Topics

Resources

License

Stars

Watchers

Forks