bootstrap-select多选+模糊查询下拉字段（官方示例文档中有详细解释）

实际开发中遇到的问题是需要一个既支持多选又支持模糊查询的下拉控件。比较出名的比较强大的下拉控件博主当时也参考了盒子插件bootstrap-Putyin 2，但是发现多选的效果比较弱。同样，

这样的多功能控制器必须足够长。如果选择超过一定限度，就会出现Style Crash，你知道吗~后来无意中发现了bootstrap-Putyn插件，立马意识到，非常高端！它支持单选和多选。最神奇的是它竟然还有模糊查询功能！首先让我向您展示很酷的效果：

我们不使用这样的控制器真是太遗憾了。后来博主找了很多文档和博客链接，却发现很多都没有明确说明具体的用途，只是简单地举了一个例子。 ，并且没有很多基准。博主通过研究官网相关文档并总结自己的开发经验，清晰地总结了bootstrap-select的使用。

插件官方地址：silviomoreto.github.io/bootstrap-s…

Github地址：github.com/silviomoret…

应用示例（参见官方文档）♽。单选

• 简单单选默认没有“√”。

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
复制代码

效果显示

• 对于组单选选择，请务必添加 optgroup 标签

   <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>
复制代码

效果显示

2。多个复选框

与单选按钮字段效果显示

3 相比，添加了多个 标签。模糊查询

新增data-live-search="true"

<select class="selectpicker" data-live-search="true">
  <option>Hot Dog</option>
  <option>Fries</option>
  <option>Soda</option>
  <option>Burger</option>
  <option>Shake</option>
  <option>Smile</option>
</select>
复制代码

效果显示

4个属性。多选限制data-max-options="2"属性或在初始化时使用maxOptionsTextselect进行限制。选择器

$('.selectpicker').selectpicker({
                'selectedText':'cat',
                'maxOptionsText':2;
             })
复制代码

效果显示

5.自定义按钮

的文本可以通过 title 属性进行控制。

• 选择字段文本

<select class="selectpicker" multiple title="请选择一个">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
复制代码

显示效果

• 选择显示单个文本。这意味着当您选择适当的选项时，将显示该选项的标题。例如，如果选择“汉堡、奶昔和微笑”，则文本框中将出现组合 2。

<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>
复制代码

效果显示

6.所选文本的多个复选框格式

使用 data-select-ed-text-format 属性控制所选值的显示。可选值有：4个数字：

1.values：以逗号分隔的所选值列表（系统默认）；

2.计数：选择某个项目时，会显示该选项的值。如果选择了多个项目，则会显示所选项目的数量。如果选择2，则下拉菜单显示选择2；

3.计数器 > x：如果数字的值小于 x，则显示以逗号分隔的所选值列表；如果count>x，x显示选择的值；

4.静态：无论选择什么，都只显示默认选择的文本。这里是一些简单的例子

<select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</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>
复制代码

效果显示

7。选择样式

• 按钮样式 在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>
复制代码

显示效果

• 单选按钮的样式要注意这里。默认情况下，选中多个复选框后，单选按钮不会显示“√”图标。要添加此图标，您需要将 show-tick 添加到样式中。只有。

<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
复制代码

显示效果

• 菜单箭头Bootstrap菜单箭头也可以添加，需要添加样式show-menu-arrow，个人感觉差别不大❝完美显示样式自定义样式bootstrap-select的风格并未消亡。您可以自定义样式，类似于最基本的 css 样式插件。

.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>
复制代码

效果显示

• 宽度（宽度）

1.参考引导样式

<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>
复制代码

2。要定义宽度，请使用属性 data-width。可选值如下： 4 auto：select的宽度由哪个选项内容宽度最宽决定； 匹配：select的宽度由实际选择的选项的宽度决定； 100px：select的宽度为100px； 50%：select 的宽度设置为父容器宽度的 50%。

<select class="selectpicker" data-width="auto">
   <option>cow</option>
    <option>bullaaaaaaaaaaaa</option>
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="fit">
  <option>cow</option>
    <option>bullaaaaaaaaaaaa</option>
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="100px">
  <option>cow</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="50%">
    <option>cow</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
</select>
复制代码

效果显示：从左到右：“自动”、“适合”、“100px”、“50%”。？更多样式请查看bootstrap官网图标库。输入 URL www.runoob.com/bootstrap/b...

2。插入 HTML。使用选项中的 data-content html 元素来实现您的愿望。期望的效果。

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

效果展示

3.粘贴二级标题并使用data-subtext实现二级标题并实现提示或其他效果。要在 select 中显示二级标题，您必须在选择时将 select Set showSubtext 初始化为 true。 ？有8个元素，我们只显示5个元素，其余的通过滚动条显示。

<select class="selectpicker" data-size="5">
    <option>apple</option>
    <option>banana</option>
    <option>group</option>
    <option>orange</option>
    <option>cherry</option>
    <option>mango</option>
    <option>pineapple</option>
    <option>lychee</option>
</select>
复制代码

显示效果（仅显示前5个，拖动滚动条可查看后面的）

2.全选和取消全选data-actions-box="true"添加全选和取消选择按钮只需在初始化时设置

       $('.selectpicker').selectpicker({
                'selectedText':'cat',
                 'noneSelectedText':'请选择',
                 'deselectAllText':'全不选',
                 'selectAllText': '全选',
             })
复制代码

效果显示

3.添加数据分隔线设置data-divider="true"添加数据分隔线。

<select class="selectpicker" data-size="5">
  <option>Mustrad</option>
  <option >Ketchup</option>
  <option >Relish</option>
  <option data-divider="true"></option>
   <option>Mustrad</option>
  <option >Ketchup</option>
  <option >Relish</option>
</select>
复制代码

效果展示

4.添加菜单标题并使用data-header设置下拉标题

<select class="selectpicker" data-header="Select a condiment">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

复制代码

效果显示

5.通过设置 dropupAuto 将菜单设置为浮动，将菜单设置为向上或向下浮动。 dropupAuto 默认为 true，并自动确定下拉框是否应出现在菜单上方或下方。如果设置为 false，则会添加 dropdown 样式的下拉列表。？ 2。将选项设置为不可用。如果选项值为disabled，则不会选择该效果。

<select class="selectpicker">
  <option>Mustard</option>
  <option disabled>Ketchup</option>
  <option>Relish</option>
</select>
复制代码

效果出现。

3。该选项组将不可用。这是一组不会被选中的选项。

<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>
复制代码

效果出现。

总结

好了，到这里我们基本上就解读完了官方的应用示例。当然，如果有疑问可以自行查看或者咨询博主。想要达到理想的效果，还需要多探索、多实践。只要你明白了规则，你就可以触类旁通了。

作者：艾雷