bootstrap多选下拉列表

最新推荐文章于 2024-05-14 09:36:19 发布

cxzlp0521

最新推荐文章于 2024-05-14 09:36:19 发布

阅读量537

点赞数 1

分类专栏：前端UI组件文章标签： bootstrap 下拉选项多选

本文链接：https://blog.csdn.net/cxzlp12345/article/details/84282158

版权

本文介绍了如何使用Bootstrap创建带有搜索和多选功能的下拉列表，包括HTML代码示例、需要引入的JS和CSS文件、全选与取消全选的实现、获取选中值的方法以及个性化参数设置，如选项显示为彩色标签和下拉样式等。

摘要由CSDN通过智能技术生成

1.简单功能展示

只包含了，多选与搜索功能
效果如图（蓝色为我自己设的背景颜色，不是插件颜色）

2.html代码

data-live-search="true"为设置是否可以搜索
multiple设置是否可以多选
selectpicker 为插件所需的类（必填）

       <select class="selectpicker form-control" id="devselectlist" data-live-search="true"                 
              multiple>
                <option value="1">option1</option>
                <option value="2">option2</option>
                <option value="3">option3</option>
                <option value="4">option4