bootstrap-select用法

原创 2016年08月31日 10:20:46

配置参数:

Core options


Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-style="" or data-selected-text-format="count".

Name Type Default Description
actionsBox boolean false

When set to true, adds two buttons to the top of the dropdown menu (Select All & Deselect All).

container string | false false

When set to a string, appends the select to a specific element or selector, e.g., container: 'body' | '.main-body'

countSelectedText string | function function

Sets the format for the text displayed when selectedTextFormat is count or count > #. {0} is the selected amount. {1} is total available for selection.

When set to a function, the first parameter is the number of selected options, and the second is the total number of options. The function must return a string.

deselectAllText string 'Deselect All'

The text on the button that deselects all options when actionsBox is enabled.

dropupAuto boolean true

checks to see which has more room, above or below. If the dropup has enough room to fully open normally, but there is more room above, the dropup still opens normally. Otherwise, it becomes a dropup. If dropupAuto is set to false, dropups must be called manually.

header string false

adds a header to the top of the menu; includes a close button by default

hideDisabled boolean false

removes disabled options and optgroups from the menu data-hide-disabled: true

iconBase string 'glyphicon'

Set the base to use a different icon font instead of Glyphicons. If changing iconBase, you might also want to change tickIcon, in case the new icon font uses a different naming scheme.

liveSearch boolean false

When set to true, adds a search box to the top of the selectpicker dropdown.

liveSearchNormalize boolean false

Setting liveSearchNormalize to true allows for accent-insensitive searching.

liveSearchPlaceholder string null

When set to a string, a placeholder attribute equal to the string will be added to the liveSearch input.

liveSearchStyle string 'contains'

When set to 'contains', searching will reveal options that contain the searched text. For example, searching for pl with return both Apple, Plum, and Plantain. When set to'startsWith', searching for pl will return onlyPlum and Plantain.

maxOptions integer | false false

When set to an integer and in a multi-select, the number of selected options cannot exceed the given value.

This option can also exist as a data-attribute for an <optgroup>, in which case it only applies to that <optgroup>.

maxOptionsText string | array | function function

The text that is displayed when maxOptions is enabled and the maximum number of options for the given scenario have been selected.

If a function is used, it must return an array. array[0] is the text used when maxOptions is applied to the entire select element. array[1] is the text used when maxOptions is used on an optgroup. If a string is used, the same text is used for both the element and the optgroup.

mobile boolean false

When set to true, enables the device's native menu for select menus.

multipleSeparator string ', '

Set the character displayed in the button that separates selected options.

noneSelectedText string 'Nothing selected'

The text that is displayed when a multiple select has no selected options.

selectAllText string 'Select All'

The text on the button that selects all options when actionsBox is enabled.

selectedTextFormat 'values' | 'static' | 'count' |'count > x' (where x is an integer) 'values'

Specifies how the selection is displayed with a multiple select.

'values' displays a list of the selected options (separated by multipleSeparator'static'simply displays the select element's title.'count' displays the total number of selected options. 'count > x' behaves like 'values'until the number of selected options is greater than x; after that, it behaves like 'count'.

selectOnTab boolean false

When set to true, treats the tab character like the enter or space characters within the selectpicker dropdown.

showContent boolean true

When set to true, display custom HTML associated with selected option(s) in the button. When set to false, the option value will be displayed instead.

showIcon boolean true

When set to true, display icon(s) associated with selected option(s) in the button.

showSubtext boolean false

When set to true, display subtext associated with a selected option in the button.

showTick boolean false

Show checkmark on selected option (for items without multiple attribute).

size 'auto' | integer | false 'auto'

When set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off.

When set to an integer, the menu will show the given number of items, even if the dropdown is cut off.

When set to false, the menu will always show all items.

style string | null null

When set to a string, add the value to the button's style.

tickIcon string 'glyphicon-ok'

Set which icon to use to display as the "tick" next to selected options.

title string | null null

The default title for the selectpicker.

width 'auto' | 'fit' | css-width | false (where css-width is a CSS width with units, e.g. 100px) false

When set to auto, the width of the selectpicker is automatically adjusted to accommodate the widest option.

When set to a css-width, the width of the selectpicker is forced inline to the given value.

When set to false, all width information is removed.

Events


Bootstrap-select exposes a few events for hooking into select functionality.

hide.bs.select, hidden.bs.select, show.bs.select, and shown.bs.select all have a relatedTarget property, whose value is the toggling anchor element.

Event Type Description
show.bs.select This event fires immediately when the show instance method is called.
shown.bs.select This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.select This event is fired immediately when the hide instance method has been called.
hidden.bs.select This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).
loaded.bs.select This event fires after the select has been initialized.
rendered.bs.select This event fires after the render instance has been called.
refreshed.bs.select This event fires after the refresh instance has been called.
changed.bs.select This event fires after the select's value has been changed. It passes through event, clickedIndex, newValue, oldValue.
$('#mySelect').on('hidden.bs.select', function (e) {
  // do something...
});

方法调用:

Core options


Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-style="" or data-selected-text-format="count".

Name Type Default Description
actionsBox boolean false

When set to true, adds two buttons to the top of the dropdown menu (Select All & Deselect All).

container string | false false

When set to a string, appends the select to a specific element or selector, e.g., container: 'body' | '.main-body'

countSelectedText string | function function

Sets the format for the text displayed when selectedTextFormat is count or count > #. {0} is the selected amount. {1} is total available for selection.

When set to a function, the first parameter is the number of selected options, and the second is the total number of options. The function must return a string.

deselectAllText string 'Deselect All'

The text on the button that deselects all options when actionsBox is enabled.

dropupAuto boolean true

checks to see which has more room, above or below. If the dropup has enough room to fully open normally, but there is more room above, the dropup still opens normally. Otherwise, it becomes a dropup. If dropupAuto is set to false, dropups must be called manually.

header string false

adds a header to the top of the menu; includes a close button by default

hideDisabled boolean false

removes disabled options and optgroups from the menu data-hide-disabled: true

iconBase string 'glyphicon'

Set the base to use a different icon font instead of Glyphicons. If changing iconBase, you might also want to change tickIcon, in case the new icon font uses a different naming scheme.

liveSearch boolean false

When set to true, adds a search box to the top of the selectpicker dropdown.

liveSearchNormalize boolean false

Setting liveSearchNormalize to true allows for accent-insensitive searching.

liveSearchPlaceholder string null

When set to a string, a placeholder attribute equal to the string will be added to the liveSearch input.

liveSearchStyle string 'contains'

When set to 'contains', searching will reveal options that contain the searched text. For example, searching for pl with return both Apple, Plum, and Plantain. When set to'startsWith', searching for pl will return onlyPlum and Plantain.

maxOptions integer | false false

When set to an integer and in a multi-select, the number of selected options cannot exceed the given value.

This option can also exist as a data-attribute for an <optgroup>, in which case it only applies to that <optgroup>.

maxOptionsText string | array | function function

The text that is displayed when maxOptions is enabled and the maximum number of options for the given scenario have been selected.

If a function is used, it must return an array. array[0] is the text used when maxOptions is applied to the entire select element. array[1] is the text used when maxOptions is used on an optgroup. If a string is used, the same text is used for both the element and the optgroup.

mobile boolean false

When set to true, enables the device's native menu for select menus.

multipleSeparator string ', '

Set the character displayed in the button that separates selected options.

noneSelectedText string 'Nothing selected'

The text that is displayed when a multiple select has no selected options.

selectAllText string 'Select All'

The text on the button that selects all options when actionsBox is enabled.

selectedTextFormat 'values' | 'static' | 'count' |'count > x' (where x is an integer) 'values'

Specifies how the selection is displayed with a multiple select.

'values' displays a list of the selected options (separated by multipleSeparator'static'simply displays the select element's title.'count' displays the total number of selected options. 'count > x' behaves like 'values'until the number of selected options is greater than x; after that, it behaves like 'count'.

selectOnTab boolean false

When set to true, treats the tab character like the enter or space characters within the selectpicker dropdown.

showContent boolean true

When set to true, display custom HTML associated with selected option(s) in the button. When set to false, the option value will be displayed instead.

showIcon boolean true

When set to true, display icon(s) associated with selected option(s) in the button.

showSubtext boolean false

When set to true, display subtext associated with a selected option in the button.

showTick boolean false

Show checkmark on selected option (for items without multiple attribute).

size 'auto' | integer | false 'auto'

When set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off.

When set to an integer, the menu will show the given number of items, even if the dropdown is cut off.

When set to false, the menu will always show all items.

style string | null null

When set to a string, add the value to the button's style.

tickIcon string 'glyphicon-ok'

Set which icon to use to display as the "tick" next to selected options.

title string | null null

The default title for the selectpicker.

width 'auto' | 'fit' | css-width | false (where css-width is a CSS width with units, e.g. 100px) false

When set to auto, the width of the selectpicker is automatically adjusted to accommodate the widest option.

When set to a css-width, the width of the selectpicker is forced inline to the given value.

When set to false, all width information is removed.

Events


Bootstrap-select exposes a few events for hooking into select functionality.

hide.bs.select, hidden.bs.select, show.bs.select, and shown.bs.select all have a relatedTarget property, whose value is the toggling anchor element.

Event Type Description
show.bs.select This event fires immediately when the show instance method is called.
shown.bs.select This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.select This event is fired immediately when the hide instance method has been called.
hidden.bs.select This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).
loaded.bs.select This event fires after the select has been initialized.
rendered.bs.select This event fires after the render instance has been called.
refreshed.bs.select This event fires after the refresh instance has been called.
changed.bs.select This event fires after the select's value has been changed. It passes through event, clickedIndex, newValue, oldValue.
$('#mySelect').on('hidden.bs.select', function (e) {
  // do something...
});

demo:

Standard select boxes

Make this:

Become this:

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

Select boxes with optgroups

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

Multiple select boxes

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

Live search


Live search

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

Key words

Add key words to options to improve their searchability using data-tokens.

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

Limit the number of selections

Limit the number of options that can be selected via the data-max-options attribute. It also works for option groups. Customize the message displayed when the limit is reached with maxOptionsText.

 
<select class="selectpicker" multiple data-max-options="2">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" multiple>
  <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>

Custom button text


Placeholder

Using the title attribute will set the default placeholder text when nothing is selected. This works for both multiple and standard select boxes:

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

Selected text

Set the title attribute on individual options to display alternative text when the option is selected:

<select class="selectpicker">
  <option title="Combo 1">Hot Dog, Fries and a Soda</option>
  <option title="Combo 2">Burger, Shake and a Smile</option>
  <option title="Combo 3">Sugar, Spice and all things nice</option>
</select>

Selected text format

Specify how the selection is displayed with the data-selected-text-format attribute on a multiple select.

The supported values are:

  • values: A comma delimited list of selected values (default)
  • count: If one item is selected, then the option value is shown. If more than one is selected then the number of selected items is displayed, e.g. 2 of 6 selected
  • count > x: Where x is the number of items selected when the display format changes from values to count
  • static: Always show the select title (placeholder), regardless of selection
<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>

Styling


Button classes

You can set the button 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>

Checkmark on selected option

You can also show the checkmark icon on standard select boxes 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>

Style individual options

Classes and styles added to options are transferred to the select box:

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>
.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

Width

Wrap selects in grid columns, or any custom parent element, to easily enforce desired widths.

<div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="selectpicker form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>

Alternatively, use the data-width attribute to set the width of the select. Set data-width to 'auto' to automatically adjust the width of the select to its widest option. 'fit' automatically adjusts the width of the select to the width of its currently selected option. An exact value can also be specified, e.g., 300px or 50%.

<select class="selectpicker" data-width="auto">
  ...
</select>
<select class="selectpicker" data-width="fit">
  ...
</select>
<select class="selectpicker" data-width="100px">
  ...
</select>
<select class="selectpicker" data-width="75%">
  ...
</select>

Customize options


Icons

Add an icon to an option or optgroup with the data-icon attribute:

<select class="selectpicker">
  <option data-icon="glyphicon-heart">Ketchup</option>
</select>

Custom content

Insert custom HTML into the option with the data-content attribute:

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

Subtext

Add subtext to an option or optgroup with the data-subtext attribute:

With showSubtext set to true.
<select class="selectpicker" data-size="5">
  <option data-subtext="Heinz">Ketchup</option>
</select>

Customize menu


The size option is set to 'auto' by default. When size is set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off. Set size to false to always show all items. The size of the menu can also be specifed using the data-size attribute.

Specify a number for data-size to choose the maximum number of items to show in the menu.

<select class="selectpicker" data-size="5">
  ...
</select>

Select/deselect all options

Adds two buttons to the top of the menu - Select All & Deselect All with data-actions-box="true".

<select class="selectpicker" multiple data-actions-box="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Divider

Add data-divider="true" to an option to turn it into a divider.

<select class="selectpicker" data-size="5">
  <option data-divider="true"></option>
</select>

Add a header to the dropdown menu, e.g. header: 'Select a condiment' or data-header="Select a condiment"

<select class="selectpicker" data-header="Select a condiment">
  ...
</select>

Container

Append the select to a specific element, e.g. container: 'body' or data-container=".main-content"

 
<div style="overflow:hidden;">
  <select class="selectpicker">
    ...
  </select>
  <select class="selectpicker" data-container="body">
    ...
  </select>
</div>

Dropup menu

dropupAuto is set to true by default, which automatically determines whether or not the menu should display above or below the select box. If dropupAuto is set to false, manually make the select a dropup menu by adding the .dropup class to the select.

<select class="selectpicker dropup">
  ...
</select>

Disabled


Disabled select box

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

Disabled options

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

Disabled option groups

<select class="selectpicker test">
  <optgroup label="Picnic" disabled>
    <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>

官方地址:

http://silviomoreto.github.io/bootstrap-select/examples/

BootStrap 下拉框插件

最近公司的一个新项目刚好要用BootStrap,研究了一下发现很多插件都没有,于是在网上找啊找,就找到了一个列表插件,无奈之下决定自己开发,于是我就从 最简单的下拉插件开始,经过两天业余时间的奋斗终于...
  • lzxadsl
  • lzxadsl
  • 2015年10月02日 12:25
  • 17103

基于bootstrap的select插件--bootstrap-select

bootstrap-select官网:http://silviomoreto.github.io/bootstrap-select/ 1.下载压缩包 2.解压后找到 bootstrap-selec...
  • qq_26927285
  • qq_26927285
  • 2016年12月22日 21:29
  • 11741

最熟悉的陌生人:ListView 中的观察者模式

RecyclerView 得宠之前,ListView 可以说是我们用的最多的组件。之前一直没有好好看看它的源码,知其然不知其所以然。 今天我们来窥一窥 ListView 中的观察者模式。 ...
  • u011240877
  • u011240877
  • 2016年09月27日 18:46
  • 3647

chosen.jquery 插件 动态设置下拉选项被选中selected

Jquery chosen动态设置值 select Ajax动态加载数据 设置chosen和获取他们选中的值  在做一个编辑对话框时,要对里面带有select option的操作。主要是想动...
  • lanqibaoer
  • lanqibaoer
  • 2016年04月19日 16:02
  • 3579

Bootstrap select样式

转载自 bootstrap-select A custom select for @twitter Bootstrap using button dropdown. Usage ...
  • zhaoyingjiao
  • zhaoyingjiao
  • 2014年10月22日 14:30
  • 37567

bootstrap框架下下拉框select搜索功能

之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样...
  • xb12369
  • xb12369
  • 2016年03月28日 17:03
  • 50135

ListView 中 getSelectedView() 和 getSelectedItem() 区别

本文是基于作者遇到的一个bug而来,如果正常情况下,可以不考虑本文做法。从官方的注释上看getSelectedView()好像是得到当前选中的 item 的view,getSelectedItem()...
  • XieYupeng520
  • XieYupeng520
  • 2015年11月11日 16:44
  • 5473

spinner中的onNothingSelected方法到底什么时候调用?

这个东东大家在开发中可能不太能用到,所以总是容易被忽略,由于工作原因,我最近琢磨了一下onNothingSelected方法的调用时机问题,其实很简单,只要我们稍微看一下源码就明白了: ...
  • u012702547
  • u012702547
  • 2016年01月28日 10:10
  • 5721

bootstrap-select怎么刷新数据

在使用bootstrap-select时,需要刷新数据。只需要调用bootstrap-select内置的方法就可以了。 this.dataservice.getData(this.url[0]).t...
  • wgp15732622312
  • wgp15732622312
  • 2017年07月23日 21:47
  • 1353

bootstrap select2使用总结

  • 2013年11月08日 17:52
  • 27KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap-select用法
举报原因:
原因补充:

(最多只允许输入30个字)