bootstrap可搜索下拉框selectpicker的用法
bootstrap可搜索下拉框selectpicker的用法
有的时候，下拉框的选项很多，用户在进行选择时会花费较长的时间。借助bootstrap的selectpicker就是一个不错的选择。
需要引入相关资源，cdn 地址为
建议，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>解析：
class = “selectpicker” ； 普通下拉框
tittle = “请选择数据项” ；作用与placeholder相同
3. class = “selectpicker” multiple； 搭配使用，可以实现多选
data-live-search = “true”； 打开模糊查询，默认值是false，需手动设置打开
data-max-options = “2”； 设置多选个数，此时至多可选2个选项
6.data-style = “btn-primary”；默认选中样式，bootstrap的按钮样式
- data-size = “10”；设置下拉框显示的option个数
8. data-dropup-auto=“false”， 表示下拉框默认向下展开
- $(’.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("