Bootstrap select样式

创建时间：2014-10-22 投稿人：浏览次数：40724

A custom select for @twitter Bootstrap using button dropdown.

Usage

Create your <select> with the .selectpicker class.

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

Enable Bootstrap-Select via JavaScript:

  $(".selectpicker").selectpicker();

Options can be passed via data attributes or JavaScript.

  $(".selectpicker").selectpicker({
      style: "btn-info",
      size: 4
  });

Example

Make this:

Become this:

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

It also works with option groups:

  <select class="selectpicker">
    <optgroup label="Picnic">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </optgroup>
    <optgroup label="Camping">
      <option>Tent</option>
      <option>Flashlight</option>
      <option>Toilet Paper</option>
    </optgroup>
  </select>

And with multiple selects:

  <select class="selectpicker" multiple>
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

(Note that you should give your selectpicker a name that ends with array syntax (example:

<select
 name="named[]" class="selectpicker" multiple>

) such that all items can be processed with php,... This is the same for <select>s withoutbootstrap-select.)

You can limit the number of elements you are allowed to select via the data-max-option attribute. It also works for option groups.

  <select class="selectpicker" multiple data-max-options="2">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
 
  <select class="selectpicker" multiple  data-max-options="2">
    <optgroup label="Condiments" data-max-options="2">
      <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
    </optgroup>
    <optgroup label="Breads" data-max-options="2">
      <option>Plain</option>
      <option>Steamed</option>
      <option>Toasted</option>
    </optgroup>
  </select>

You can set different Bootstrap classes via the data-style attribute:

  <select class="selectpicker" data-style="btn-primary">
    ...
  </select>
 
  <select class="selectpicker" data-style="btn-info">
    ...
  </select>
 
  <select class="selectpicker" data-style="btn-success">
    ...
  </select>
 
  <select class="selectpicker" data-style="btn-warning">
    ...
  </select>
 
  <select class="selectpicker" data-style="btn-danger">
    ...
  </select>
 
  <select class="selectpicker" data-style="btn-inverse">
    ...
  </select>

You can add a search input by passing data-live-search="true" attribute:

You can also use the title attribute as an alternative to display when the option is selected:

Using the title attribute on a multiple select will show the default prompt text when nothing is selected (note: this will not work on single select elements as they must have a selected value):

  <select class="selectpicker" multiple title="Choose one of the following...">
     <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

Using the data-selected-text-format attribute on a multiple select you can specify how the selection is displayed.

The supported values are:

values A comma delimted list of selected values. (default)
count If one item is selected, then the value is shown, if more than one is selected then the number of selected items is displayed, eg 2 of 6 selected
count > x Where X is the number of items selected when the display format changes from values to count

  <select class="selectpicker" multiple data-selected-text-format="count">
     <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

  <select class="selectpicker" multiple data-selected-text-format="count>3">
     <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
      <option>Onions</option>
  </select>

You can also show the tick icon on single select with the show-tick class:

  <select class="selectpicker show-tick">
     <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

The bootstrap menu arrow can be added with the show-menu-arrow class:

  <select class="selectpicker show-menu-arrow">
     <option>Mustard</option>
      <option>Ketchup</option>
      <option>Relish</option>
  </select>

Classes added to the options are transferred to the select:

  <select class="selectpicker">
    <option>Mustard</option>
    <option class="special">Ketchup</option>
    <option>Relish</option>
  </select>

  .special {
    font-style: italic;
    font-weight: bold !important;
    color:#bc0000 !important;
    background:#000;
  }

Apply .span* class to the selects to set the width.