bootstrap可搜索下拉框selectpicker的用法

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

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

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

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

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

    
       alphabet
       aa
       bbb
       cccc
       ddddd
       eeeeee
    

解析：

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("text");