2. 程式人生 > >bootstrap-select用法

bootstrap-select用法

阿新 • • 發佈：2019-02-07

配置引數：

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.

相關推薦

bootstrap-select用法

配置引數： Core options Options can be passed via data attributes or JavaScript. For data attributes, append the option name to d

bootstrap select 多選的用法，取值和賦值（取消預設選擇第一個的對勾）

h5自帶的select標籤可以實現按住ctrl鍵多選的功能，但是樣式及其難看。 bootstrap select是很好用的前端外掛 首先引入bootstrap和bootstrap-select的css和js <link rel="stylesheet" h

bootstrap select多選

div live 初中 cte 頁面效果 arch selected ive tar 1、頁面效果 <div class="form-group"> <div class="col-md-2 control-label"><lab

bootstrap 筆記用法

uem 出了 xss put tabs ogr 定義 mat disable container 實現內容居中對齊jumbotron 超大屏幕 可以增加標題的大小responsive 響應式 center-block 圖像居中col-md-offset-X 向左

select用法

man put top命令 done 命令 lec command free 用法 select也是循環的一種，它比較適合用在用戶選擇的情況下。比如，我們有一個這樣的需求，運行腳本後，讓用戶去選擇數字，選擇1，會運行w命令，選擇2運行top命令，選擇3運行free命令，選擇

for循環、while循環、continue、break、exit解析、select用法

for循環、while循環、contin20.10 for循環 eg： 求1到100數字的和。[root@localhost sbin]# vim sum.sh#!/bin/bashsum=0for i in seq 1 5dosum=$[sum+$i]doneecho "$sum" [r

bootstrap select 下拉框沒選擇

itl boot span att 解決 時也 tle spa sele 情況：根據取得的值去選定select下拉框的選項。但不知為何每次根據select的id傳遞值過去了，也能取得對應的值，但是頁面上的select依然是下拉框第一個選項，但點擊下拉框時，會在對應的值有特殊

Django bootstrap-select 多選框顯示以及回顯

sel i++ ctp pty edi val sele 多選 pic 初始化 function showUserList(param) { $.ajax({ url: "user/detail/0/", type: ‘get‘,

shell之select用法

用法 per zhang select zha 結合 我們 oot ech 有的時候我們在寫shell腳本的時候，需要通過菜單的方式去看到自己相要的內容；select可以實現菜單的功能；select要與case結合使用； PS3="Please select a numbe

談談企業資訊系統tag標籤資料庫設計及基於多選元件bootstrap-select的實現

一、摘要 Tag標籤類似於分類，可以用於標記、區分事物，但又不同於分類，通常分類是單一所屬，而Tag往往是多個。如純淨水596ml它屬於純淨水分類，可以標記：596ml、純淨水、掃碼有獎等tag。本文討論限於企業資訊系統中的tag標籤應用，涉及2部分內容：tag標籤資料庫設計，前端頁面如

bootstrap-select的使用

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document<

select框多選（利用Bootstrap-select）

前端HTML： <select id="usertype" multiple class="selectpicker" style="width:150px;height: 38px;" > <option value="101" >列印條形碼</optio

bootstrap-select動態級聯多選下拉框

1、引用css/js <link href="../../plugins/css/bootstrap.min.css" rel="stylesheet"> <link href="../../plugins/css/plugins/bootstrap-table/bootstr

bootstrap-select採坑

bootstrap-select採坑 1.class="selectpicker" 普通的下拉框功能 2.title="請選擇城市名稱" title的作用與palcehoder一樣。 3.select class="selectpicker" multiple selectpicker和multiple屬性的

HTML筆記——bootstrap-select、table、tableExport、layer

  ！！使用軟體：vs2010！！ ！！要在伺服器上執行，不然載入不了json資料！！ 全部程式碼檔案： 連結：https://pan.baidu.com/s/1EFY9NFSNhX7OYAsg3yxK1Q 提取碼：yxtg 實現功能 1、根據下拉框的值填充表格資料 下拉框(b

python+selenium七：下拉框、選項框、select用法 python+selenium七：下拉框、選項框、select用法

python+selenium七：下拉框、選項框、select用法   from selenium import webdriverfrom selenium.webdriver.common.action_chains import ActionChainsimpo

CollectionUtils.select用法

import java.util.ArrayList;import java.util.List;import org.apache.commons.collections.CollectionUtils;import org.apache.commons.collections.Predicate;impo

使用shell建立一個簡單的選單bash select用法

概述 寫指令碼的時候會碰到建立互動式選單的情況，比如碰到寫一個lnmp一鍵安裝指令碼的時候會讓使用者選擇安裝mysql的版本或者選擇安裝各種元件，總之在建立選單是很常見的。 而select是bash的一種擴充套件應用，讓使用者可以在一組不同的值中選擇，類似下面 This is a

layui select 用法

<select name="dw.id" selWidth="172" url="../dw/getList.json" selectedValue="${bean.dw.id}" colNum="4" colWidth="200"> </select>

bootstrap-select外掛實現下拉框搜尋功能

工作上要用到在下拉框內實現搜尋功能，原生的select標籤是不能輸入的，所以最終找到了bootstrap-select外掛，功能十分強大，支援搜尋，多選，分組選中等。 本文摘取自： 官方文件 簡單示例 下面先附上我的程式碼，實現了搜尋功能，