bootstrap select组件

快来打我* 2022-06-01 13:08 308阅读 0赞

**一、组件开源地址以及API说明**  
bootstrap-select开源地址：[https://github.com/silviomoreto/bootstrap-select][https_github.com_silviomoreto_bootstrap-select]

bootstrap-select使用示例：[http://silviomoreto.github.io/bootstrap-select/examples/][http_silviomoreto.github.io_bootstrap-select_examples]

bootstrap-select文档说明：[http://silviomoreto.github.io/bootstrap-select/options/][http_silviomoreto.github.io_bootstrap-select_options]

**二、组件效果示例**  
1、引入文件  
bootstrap-select给予bootstrap，boostrap又基于jquery，因此需引入如下文件，同时bootstrap-select需用到bootstrap/fonts路径下的图标，因此也需导入该目录。

<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-select.min.css">
    
            
        <script src="/static/jquery-1.12.4.js"></script>
        <script src="/static/bootstrap/js/bootstrap.min.js"></script>
        <script src="/static/bootstrap/js/bootstrap-select.min.js"></script>

**三.基础示例**  
单选：

多选：  
给一个select标签加上selectpicker样式即可。

**四、其他效果示例**  
选项搜索功能：  
增加属性：data-live-search=”true”

选项分组

设置最多选项：  
data-max-options=”2”

选项显示为带颜色的标签

缩略框颜色样式：

**五、取值赋值：**  
取值：  
关于组件取值保持原生的jquery方法，比如 var value = $(‘\#sel’).val(); 这样是不是很简单，需要注意的是，如果是多选，这里得到的value变量是一个数组变量，形如 \[‘1’,’2’,’3’\]。

赋值

组件赋值就需要稍微变换一下了，如果你直接 $(‘\#sel’).val(‘1’); 这样赋值将会无效，正确的赋值方法为：

$('.selectpicker').selectpicker('val', '1');
    $('.selectpicker').selectpicker('val', ['1','2','3']) //多个选项赋值

在一些级联选择的使用场景中，经常需要在赋值的时候顺便触发一下组件的change事件，我们可以这么做。

$('.selectpicker').selectpicker('val', '1').trigger("change");

如果是多选的赋值，也是一样:

$('.selectpicker').selectpicker('val', ['1','2','3']).trigger("change");

**六、组件其他用法**

全选： $('.selectpicker').selectpicker('selectAll'); 
    
    反选： $('.selectpicker').selectpicker('deselectAll'); 
    
    适应手机模式： $('.selectpicker').selectpicker('mobile'); 
    
    组件禁用：
    
    $('.disable-example').prop('disabled', true);
    $('.disable-example').selectpicker('refresh');
    组件启用：
    
    $('.disable-example').prop('disabled', false);
    $('.disable-example').selectpicker('refresh');
    组件销毁：
    
    $('.selectpicker').selectpicker('destroy');

以编程方式切换bootstrap-select菜单的打开/关闭。

$('.selectpicker').selectpicker('toggle')

以编程方式隐藏bootstrap-select使用hide方法（这仅影响bootstrap-select自身的可见性）。

$('.selectpicker')..selectpicker('hide')

本文转载至：[JS组件系列——再推荐一款好用的bootstrap-select组件，亲测还不错][JS_bootstrap-select]

手动mark一下，留后用.

**补充：**  
组件操作后刷新：

$('.selectpicker').selectpicker('refresh'); //使用JS更新该selectpicker对象的内容后，需用此方法手动刷新探测

select点击按钮（即下拉框展开）事件：

$('#business').on('shown.bs.select',function () { } //可使用ajax动态获取option

[https_github.com_silviomoreto_bootstrap-select]: https://github.com/silviomoreto/bootstrap-select
[http_silviomoreto.github.io_bootstrap-select_examples]: http://silviomoreto.github.io/bootstrap-select/examples/
[http_silviomoreto.github.io_bootstrap-select_options]: http://silviomoreto.github.io/bootstrap-select/options/
[JS_bootstrap-select]: https://www.cnblogs.com/landeanfen/p/7457283.html#_label0