Bootstrap下拉单选框，下拉搜索多选框Bootstrap-select

下面给大家介绍一款集下拉搜索多选框，下拉单选框与一体的bootstrap组件Bootstrap-select，bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能，多选功能，搜索功能，自定义内容和图标等多种功能，非常强大。实现效果如下。一、使用方法在页面中引入jquery和bootstrap相关文件，以及boots...

小山沟里的程序猿

6713人浏览 · 2019-12-05 20:07:51

小山沟里的程序猿 · 2019-12-05 20:07:51 发布

一、使用方法

在页面中引入jquery和bootstrap相关文件，以及bootstrap-select.js和bootstrap-select.css文件。

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-select.css">

<link href="css/jquery.min.css" rel="stylesheet">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/bootstrap-select.css" rel="stylesheet">

二、具体用法

带分组的下拉选择框（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）

<select class="selectpicker" multiple>

<option>Mustard</option>

<option>Ketchup</option>

<option>Relish</option>

</select>

关键词（Key words）

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

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

自定义占位文本（Placeholder）

<select class="selectpicker" multiple title="请选择内容。。">

<option>Mustard</option>

<option>Ketchup</option>

<option>Relish</option>

</select>

替换文本（Selected text）

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

通过data-selected-text-format属性，可以指定在多选下拉框选择选项后的显示格式。支持的属性有：

values：用逗号分隔选择项。（默认）
count：当选项等于一个时，显示选择选项的数量。
count > x：当选项大于某个数值时，从显示逗号分隔的多个值改为显示选择的数量。
static：总是显示选择的替换文本。

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

按钮样式（Button classes）

通过data-style属性来为下拉框设置情景样式。

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

在已经选择的选项上添加勾选图标。

<select class="selectpicker show-tick">

<option>Mustard</option>

<option>Ketchup</option>

<option>Relish</option>

</select>

下拉框箭头（Menu arrow）

为下拉框添加一个箭头。

<select class="selectpicker show-menu-arrow">

<option>Mustard</option>

<option>Ketchup</option>

<option>Relish</option>

</select>

自定义分割线样式（Style individual options）

可以自定义分割线样式。

.special {

font-weight: bold !important;

color: #fff !important;

background: #bc0000 !important;

text-transform: uppercase;

}

<select class="selectpicker">

<option>Mustard</option>

<option class="special">Ketchup</option>

<option style="background: #5cb85c; color: #fff;">Relish</option>

</select>

下拉框宽度（Width）

可以自定义下拉框的宽度。

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

还可以通过data-width属性来设置下拉框的宽度。

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

图标（Icons）

可以通过data-icon属性来为选项设置一个图标。

<select class="selectpicker">

<option data-icon="glyphicon-heart">Mustard</option>

<option data-icon="glyphicon-star">Ketchup</option>

<option data-icon="glyphicon-paperclip">Relish</option>

</select>

自定义内容（Custom content）

可以通过data-content属性来为选项插入HTML内容。

<select class="selectpicker">

<option data-content="<span class='label label-success'>Mustard</span>">Mustard</option>

<option data-content="<span class='label label-info'>Ketchup</span>">Ketchup</option>

<option data-content="<span class='label label-primary'>Relish</span>">Relish</option>

</select>

子文本（Subtext）

可以通过data-size属性来为选项添加一个子描述文本。

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

<option data-subtext="Heinz">Mustard</option>

<option data-subtext="ok">Ketchup</option>

<option data-subtext="hello">Relish</option>

</select>

菜单显示多少项（Menu size）

菜单的尺寸默认为auto。如果设置菜单尺寸为false或0，则显示所有的菜单项。你可以通过data-size属性来设置指定的菜单尺寸。下面的菜单只显示2项。

<select class="selectpicker" data-size="2">

<option data-subtext="Heinz">Mustard</option>

<option data-subtext="ok">Ketchup</option>

<option data-subtext="hello">Relish</option>

</select>

全选或全不选（Select/deselect all options）

通过data-actions-box="true"来对下拉框进行全选或全不选。

<select class="selectpicker" multiple data-actions-box="true">

<option data-subtext="Heinz">Mustard</option>

<option data-subtext="ok">Ketchup</option>

<option data-subtext="hello">Relish</option>

</select>

分隔线（Divider）

通过data-divider="true"来设置下拉框的分隔线。

<select class="selectpicker">

<option>Mustard</option>

<option data-divider="true"></option>

<option>Ketchup</option>

<option>Relish</option>

</select>

菜单头部（Menu header）

通过data-header来设置下拉框设置一个菜单头选项。

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

<option>Mustard</option>

<option>Ketchup</option>

<option>Relish</option>

</select>

箭头方向（Dropup menu）

通过.dropupclass来手动设置小箭头的方向为向上方向。

<select class="selectpicker dropup">

<option>Mustard</option>

<option>Ketchup</option>

<option>Relish</option>

</select>

禁用下拉框（Disabled select box）

通过disabled属性来禁用下拉框。

<select class="selectpicker" disabled>

<option>Mustard</option>

<option>Ketchup</option>

<option>Relish</option>

</select>

禁用菜单项（Disabled options）

通过为菜单项添加.disabled属性来禁用它。

<select class="selectpicker disabled">

<option>Mustard</option>

<option disabled>Ketchup</option>

<option>Relish</option>

</select>

禁用下拉框分组（Disabled option groups）

通过为分组添加.disabled属性来禁用它。

<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://www.htmleaf.com/jQuery/Form/201802134981.html

http://www.htmleaf.com/Demo/201802134982.html

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

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

每日AI学习笔记----Qwen3-Omni 、HuatuoGPT-o1医学复杂推理

最近作者开始上班了~上班两个多月，终于也是找到一点点工作的节奏~~。也深感到自己的不足，常在思考，选择这个行业是否正确，但是既然选择了，那么去深入也是乐趣所在。没有什么比静下心来学习能让你更踏实。浮躁了就去学习，想谈恋爱了就去学习，烦了就去学习吧，孩子。因此作者决定只要工作不加班到很晚，每天都要坚持至少一小时的AI新知识和技术的学习。

2048 AI社区

AI 智能体开发的 6A 原则：从需求到落地的全链路方法论

2048 AI社区

自定义Traits应用

重新排列范围，使得指定位置的元素等于排序后的元素，并且左边的元素都不大于它，右边的元素都不小于它。算法的原理是 “覆盖” 要删除的元素，将保留的元素移到前面，返回新的逻辑尾迭代器，但。对范围内的每个元素应用一个函数，并将结果存储在另一个范围内。移除范围内连续的重复元素，返回新的逻辑结尾迭代器。旋转范围内的元素，使中间元素成为新的第一个元素。这些算法不会改变它们所操作的容器中的元素。这些算法会修改它