bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

栏目: CSS · 发布时间: 6年前

内容简介:之前博主在实际开发中遇到了一个问题,就是需要既支持多选又同时支持模糊查询的下拉控件,大家所熟知的比较强大的下拉框插件bootstrap-select2,博主当时也参考过,但是发现它的多选效果做的比较差,类似这种,这样的多选控件必须要控件足够长,如果选择超过一定限制就会出现样式崩溃,你懂的~后面我无意中发现了bootstrap-select插件,瞬间发现它很高大上呀!它即可以支持单选,又支持多选,最厉害的是竟然还自带模糊查询功能!先给大家展示下炫酷的效果吧:

之前博主在实际开发中遇到了一个问题,就是需要既支持多选又同时支持模糊查询的下拉控件,大家所熟知的比较强大的下拉框插件bootstrap-select2,博主当时也参考过,但是发现它的多选效果做的比较差,类似这种,

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

这样的多选控件必须要控件足够长,如果选择超过一定限制就会出现样式崩溃,你懂的~后面我无意中发现了bootstrap-select插件,瞬间发现它很高大上呀!它即可以支持单选,又支持多选,最厉害的是竟然还自带模糊查询功能!先给大家展示下炫酷的效果吧:

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

这样的控件不用真是可惜了,后面博主找了很多文档和博客参考,但是发现很多都没有写清楚具体的用法,只是简单的摆一个例子,并没有太大的参考价值,博主通过研究官网的相关文档以及结合自身开发经验,把bootstrap-select的用法做一个清晰的梳理,供大家参考。

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

Github地址: github.com/silviomoret…

应用示例(参考官方文档Basic examples)

1.单选

  • 简单单选 选中默认是没有“√”的。
<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
复制代码

效果展示

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

2.多选框

相比于单选框加入了一个 multiple 标签

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

4.多选限制

添加属性 data-max-options="2" 或者在初始化时用 maxOptionsText 做限制

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

或者在初始化selectpicker时设置maxOptionsText

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

5.自定义按钮的文本

通过属性 title 来控制。

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)
  • 选择显示单条文本 意思就是选中相应的option,就展示option的title,比如选中"Burger, Shake and a Smile",文本框内显示Combo 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>
复制代码

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

6.多选框格式化选择文本

通过属性 data-selected-text-format 来控制选中的值的显示 可选的值有如下4个:

1. values : 逗号分隔的选定值列表(系统默认);

2. count : 如果选择了一个项,则显示选项值。如果选择多于一个,则显示所选项的数量,如选择2个,则下拉框显示2个已被选中;

3. count > x : 当count的值小于x时,展示逗号分隔的选定值列表;当count>x时,显示x个被选中;

4. static :无论选中什么,都只展示默认的选中文本。 下面给几个简单示例

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)
<select class="selectpicker" multiple data-selected-text-format="count>3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>
复制代码

效果展示

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)
  • 单选框样式 这里要注意一下,单选框默认是没有多选框的选中之后的"√"图标的,如果想要加上这个图标的话,需要在样式中加入 show-tick 即可。
<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
复制代码

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)
  • 菜单的箭头 Bootstrap的菜单箭头也可以被添加进来,需要加入样式 show-menu-arrow ,个人感觉差别不大
<select class="selectpicker show-menu-arrow">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
复制代码

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)
  • style样式自定义 bootstrap-select的样式不是死的,可以自定义style样式,类似最基本的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>
复制代码

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)
  • 宽度(Width)

1.引用bootstrap的样式

<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的宽度由option中内容宽度最宽的哪个决定; fit :select的宽度由实际选中的option的宽度决定; 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>
复制代码

效果展示:从左至右依次为“auto”,“fit","100px","50%"。

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

8.自定义option

1.添加图标 用 data-icon 给option添加小图标,实现比较炫酷的效果

<select class="selectpicker">
  <option data-icon="glyphicon-heart">Ketchup</option>
  <option data-icon="glyphicon glyphicon-th-large">Mustard</option>
  <option data-icon="glyphicon glyphicon-home">Relish</option>
</select>
复制代码

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

如果想要获取更多样式可参考bootstrap官网的图标库,给个网址 www.runoob.com/bootstrap/b…

2.插入HTML 用 data-content 可以在option中插入html元素,实现想要的效果。

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

3.插入二级标题 用 data-subtext 实现二级标题,实现提示或者其他效果,如果要在select中也展示二级标题,要在初始化selectpicker时要设置 showSubtext 为true。

<select class="selectpicker" data-size="5">
    <option data-subtext="Heinz">Ketchup</option>
    <option data-subtext="ble">Mustard</option>    
    <option data-subtext="com">Relish</option>
</select>
复制代码

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)
$('.selectpicker').selectpicker({
                'selectedText':'cat',
                'showSubtext':true
             })
             
<select class="selectpicker" data-size="5">
    <option data-subtext="Heinz">Ketchup</option>
    <option data-subtext="ble">Mustard</option>    
    <option data-subtext="com">Relish</option>
</select>
复制代码

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

9.自定义下拉菜单

1.菜单显示项大小 通过 data-size 属性来限制菜单显示的条数,比如说option有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个,后面的可以拖动滚动条查看)

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

2.全选和全不选 通过设置 data-actions-box="true" 来添加全选和全不选的按钮

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

当然这个按钮的文本也是可以自定制的 只需要在初始化时设置即可

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

4.添加菜单头 用 data-header 为下拉菜单设置菜单头

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

复制代码

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)
5.设置菜单的上浮或者下浮 通过设置 dropupAuto 来设置菜单的上下浮动, dropupAuto 默认为true,自动确定是否应显示的菜单上面或下面的选择框,如果设置为false,系统会加入一个 dropup

样式的上拉框。

$('.selectpicker').selectpicker({
                'selectedText':'cat',                   
                 'dropupAuto':false
             })

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

10.不可用

在对应的控件上加入 disabled 即可实现 1.设置select不可用 这里select按钮失效,不能点击

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

2.设置option不可用 这里option设置属性为 disabled 的将无法选中

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

3.设置optiongroup不可用 这里是一个optiongroup将无法选中

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

效果展示

bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)

总结

好的,这里我们基本上把官方的应用示例解读完毕,当然如果有疑问可以自己亲自去验证或者咨询博主,想实现自己想要的效果就要多加摸索和实践,只要明白其中的规则就能触类旁通了。第一篇关于bootstrap-select的官方示例文档的解读,如果想了解更多bootstrap-select的用法,可以关注我后面的博客哦。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

写给大家看的设计书(第4版)

写给大家看的设计书(第4版)

Robin Williams / 苏金国、李盼 / 人民邮电出版社 / 2016-1 / 59.00元

畅销设计入门书最新版,让每个人都能成为设计师 在这个创意无处不在的时代,越来越多的人成为设计师。简历、论文、PPT、个人主页、博客、活动海报、给客人的邮件、名片……,处处都在考验你的设计能力。 美术功课不好?没有艺术细胞?毫无设计经验? 没关系!在设计大师RobinWilliams看来,设计其实很简单。在这部畅销全球多年、影响了一代设计师的经典著作中,RobinWilliams将......一起来看看 《写给大家看的设计书(第4版)》 这本书的介绍吧!

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具