搜索
首页web前端Bootstrap教程深入解析bootstrap-select中的多选和模糊查询下拉框

深入解析bootstrap-select中的多选和模糊查询下拉框

May 10, 2021 am 10:58 AM
bootstrap下拉框多选模糊查询

本篇文章带大家详细了解一下bootstrap-select中的多选和模糊查询下拉框。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

深入解析bootstrap-select中的多选和模糊查询下拉框

引入问题

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

select2的多选效果

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

bootstrap-select demo

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

官方插件地址: http://silviomoreto.github.io/bootstrap-select

Github地址:  https://github.com/silviomoreto/bootstrap-select

应用示例(参考官方文档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

$(&#39;.selectpicker&#39;).selectpicker({
                &#39;selectedText&#39;:&#39;cat&#39;,
                &#39;maxOptionsText&#39;: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,个人感觉差别不大
8abc2334b079bc8569bc33bb71646f61
  5a07473c87748fb1bf73f23d45547ab8Mustard4afa15d3069109ac30911f04c56f3338
  5a07473c87748fb1bf73f23d45547ab8Ketchup4afa15d3069109ac30911f04c56f3338
  5a07473c87748fb1bf73f23d45547ab8Relish4afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341

效果展示

深入解析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=&#39;label label-success&#39;>Relish</span>">Relish</option>
</select>

效果展示

深入解析bootstrap-select中的多选和模糊查询下拉框

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

8f917218edab04b609259e73d6d2d43c
    7dcb8f9e0c4a5f501d5f539b9f65f45cKetchup4afa15d3069109ac30911f04c56f3338
    e3d392db2c06cb4048b3534cef74d33cMustard4afa15d3069109ac30911f04c56f3338    
    27b1faa7fc73dbbd3aff8e07f09f7495Relish4afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341

效果展示

深入解析bootstrap-select中的多选和模糊查询下拉框
$(&#39;.selectpicker&#39;).selectpicker({
                &#39;selectedText&#39;:&#39;cat&#39;,
                &#39;showSubtext&#39;: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样式的上拉框。

 $(&#39;.selectpicker&#39;).selectpicker({
                &#39;selectedText&#39;:&#39;cat&#39;,                   
                 &#39;dropupAuto&#39;: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的用法,可以关注我后面的博客哦。

更多编程相关知识,请访问:编程入门!!

以上是深入解析bootstrap-select中的多选和模糊查询下拉框的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:掘金社区。如有侵权,请联系admin@php.cn删除
打破bootstrap:是什么以及为什么重要打破bootstrap:是什么以及为什么重要Apr 14, 2025 am 12:05 AM

Bootstrapisafree,开放式frameworkthatsimplifiesRessiveandMobile-firstwebsitedEvelvelopment.itofferspre-styledComponentsAndAgridSystem,流化inthiningthecreationofaesthethetshethetshetshetshetshetshetshetshetshetshethetshethet interpleaseansing和Runctinctionalwebdesigns。

Bootstrap:使网页设计更容易Bootstrap:使网页设计更容易Apr 13, 2025 am 12:10 AM

Bootstrap让网页设计更容易的原因是其预设组件、响应式设计和丰富的社区支持。1)预设组件库和样式让开发者无需编写复杂的CSS代码;2)内置网格系统简化了响应式布局的创建;3)社区支持提供了丰富的资源和解决方案。

Bootstrap的影响:加速网络开发Bootstrap的影响:加速网络开发Apr 12, 2025 am 12:05 AM

Bootstrap加速了Web开发,通过提供预定义的样式和组件,开发者可以快速搭建响应式网站。1)它缩短了开发时间,例如在项目中几天内完成基本布局。2)通过Sass变量和mixins,Bootstrap允许定制样式以满足特定需求。3)使用CDN版本可以优化性能,提高加载速度。

理解引导:核心概念和功能理解引导:核心概念和功能Apr 11, 2025 am 12:01 AM

Bootstrap是一个开源的前端框架,主要作用是帮助开发者快速构建响应式网站。1)它提供了预定义的CSS类和JavaScript插件,方便实现复杂的UI效果。2)Bootstrap的工作原理依赖于其CSS和JavaScript组件,通过媒体查询实现响应式设计。3)使用示例包括基本用法,如创建按钮,以及高级用法,如自定义样式。4)常见错误包括类名拼写错误和未正确引入文件,建议使用浏览器开发者工具调试。5)性能优化可通过自定义构建工具实现,最佳实践包括使用语义化HTML和Bootstrap的预定义

Bootstrap Deep Dive:响应式设计和高级布局技术Bootstrap Deep Dive:响应式设计和高级布局技术Apr 10, 2025 am 09:35 AM

Bootstrap通过网格系统和媒体查询实现响应式设计,使网站适应不同设备。1.使用预定义类(如col-sm-6)定义列宽。2.网格系统基于12列,需注意总和不超12。3.使用断点(如sm、md、lg)定义不同屏幕尺寸下的布局。

Bootstrap面试问题:降落您梦想的前端工作Bootstrap面试问题:降落您梦想的前端工作Apr 09, 2025 am 12:14 AM

Bootstrap是一套开源的前端框架,用于快速开发响应式网站和应用。1.它提供了响应式设计、一致的UI组件和快速开发的优势。2.网格系统使用flexbox布局,基于12列结构,通过.container、.row和.col-sm-6等类实现。3.自定义样式可以通过修改SASS变量或覆盖CSS实现。4.常用JavaScript组件包括模态框、轮播图和折叠。5.优化性能可以通过只加载必要组件、使用CDN和压缩合并文件来实现。

Bootstrap&JavaScript集成:动态功能和功能Bootstrap&JavaScript集成:动态功能和功能Apr 08, 2025 am 12:10 AM

Bootstrap和JavaScript可以无缝整合,赋予网页动态功能。1)使用JavaScript操作Bootstrap组件,如模态框和导航栏。2)确保jQuery正确加载,避免常见集成问题。3)通过事件监听和DOM操作实现复杂用户交互和动态效果。

bootstrap搜索栏怎么获取bootstrap搜索栏怎么获取Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 获取搜索栏的值:确定搜索栏的 ID 或名称。使用 JavaScript 获取 DOM 元素。获取元素的值。执行所需的操作。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具