Posted By admin
Bootstrap Select

The best select plugin for bootstrap.

https://github.com/snapappointments/bootstrap-select

Demo

You can view a live demo and some examples of how to use the various options here.

Quick start

Bootstrap-select requires jQuery v1.9.1+, Bootstrap’s dropdown.js component, and Bootstrap’s CSS. If you’re not already using Bootstrap in your project, a precompiled version of the Bootstrap v3.3.7 minimum requirements can be downloaded here. If using bootstrap-select with Bootstrap v4+, you’ll also need Popper.js. For all of Bootstrap v4’s requirements, see Getting started. A precompiled version of the requirements will be made available in an upcoming release of bootstrap-select.

Several quick start options are available:

  • Download the latest release.
  • Clone the repo: git clone https://github.com/snapappointments/bootstrap-select.git
  • Install with npmnpm install bootstrap-select
  • Install with yarnyarn add bootstrap-select
  • Install with Composercomposer require snapappointments/bootstrap-select
  • Install with NuGetInstall-Package bootstrap-select
  • Install with Bowerbower install bootstrap-select
  • Install via CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/i18n/defaults-*.min.js"></script>

The CDN is updated after the release is made public, which means that there is a delay between the publishing of a release and its availability on the CDN.

Usage

Bootstrap 4 only works with bootstrap-select v1.13.0+. By default, bootstrap-select automatically detects the version of Bootstrap being used. However, there are some instances where the version detection won’t work. See the documentationfor more information.

Via selectpicker class

Add the selectpicker class to your select element to use the data-api.

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

Via JavaScript

// To style only selects with the selectpicker class
$('.selectpicker').selectpicker();

or

// To style all selects
$('select').selectpicker();

If calling bootstrap-select via JavaScript, you will need to wrap your code in a $(document).ready() block or place it at the bottom of the page (after the last instance of bootstrap-select).

Check out the documentation for further information.

Bugs and feature requests

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you’re using the latest version of bootstrap-select before submitting an issue.

Documentation

Bootstrap-select’s documentation, included in this repo in the root directory, is built with MkDocs and hosted at https://developer.snapappointments.com/bootstrap-select. The documentation may also be run locally.

Review


How to set the value of a live search field and trigger it?

I was in a similar situation and my jquery calls to update the search input field were not triggering a search. So after each change, I added:
$(".searchinput").trigger('propertychange')
this then would trigger the search function.


I’m using Bootstrap Select to style some select fields inside an accordion. Bootstrap select has a feature where it will make your dropdown dropup if it is near the bottom of the screen.
In this case I do not want it to drop up but I can’t find where to disable this.


Options can be passed via JavaScript or data attributes:
$('.selectpicker').selectpicker({ dropupAuto: false });
or
<select class="selectpicker" data-dropup-auto="false"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select>
You can also set this globally:
$.fn.selectpicker.Constructor.DEFAULTS.dropupAuto = false;

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Leave a comment

Your email address will not be published. Required fields are marked *