bootstrap可搜索下拉框selectpicker的用法

有的时候，下拉框的选项很多，用户在进行选择时会花费较长的时间。借助bootstrap的selectpicker就是一个不错的选择。

需要引入相关资源，cdn 地址为 https://www.bootcdn.cn/bootstrap-select/

建议，css引入顺序为 1. bootstrap-select.css 2. bootstrap.css

<link rel="stylesheet" href="../static/css/bootstrap-select.css">
<link rel="stylesheet" href="../static/css/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="../static/css/bootstrap-datetimepicker.min.css">

建议，js的引入顺序为 1. jquery.js 2. bootstrap.js 3.bootstrap-select.js

<script src="../static/js/jquery-3.4.1.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/bootstrap-select.js"></script>

示例：注意的是--搜索框中键入的字符在中英文半全角状态会出现不同值。

<div class="col-md-4" style="padding:0;">
    <select id="selectSf" class="selectpicker" multiple data-hide-disabled="true" data-size="5" data-live-search="true">
       <option value="00000000" selected="">alphabet</option>
       <option value="10000000">aa</option>
       <option value="20000000">bbb</option>
       <option value="20000000">cccc</option>
       <option value="30000000">ddddd</option>
       <option value="40000000">eeeeee</option>
    </select>
</div>

解析：

1. class = "selectpicker" ；普通下拉框

2. tittle = "请选择数据项" ；作用与placeholder相同

3. class = "selectpicker" multiple；搭配使用，可以实现多选

4. data-live-search = "true"；打开模糊查询，默认值是false，需手动设置打开

5. data-max-options = "2"；设置多选个数，此时至多可选2个选项

6.data-style = "btn-primary"；默认选中样式，bootstrap的按钮样式

7. data-size = "10"；设置下拉框显示的option个数

8. data-dropup-auto="false"，表示下拉框默认向下展开

9. $('.selectpicker').selectpicker('selectAll'); 全选：
$('.selectpicker').selectpicker('deselectAll'); 反选：
$('.selectpicker').selectpicker('mobile'); 适应手机模式：

问题：动态添加数据之后，下拉框并没有渲染，没有报错，浏览器查看源码时又存在这些选项值。或者，编译完成后第一次进入页面生效，刷新或切换到其他界面之后就失效。

处理：

$(function () {
    $('.selectpicker').selectpicker('refresh');
    $('.selectpicker').selectpicker('render');
})

取值：

选中的值可以通过jquery获取：let source = $("#select").val().join();

由于选中结果是个array，使用时记得转换成string再做操作。

动态赋值：

$("#select").append("<option value='1111'>text</option>");

bootstrap可搜索下拉框selectpicker的用法

猜你喜欢