Bootstrap-select使用说明

背景

Bootstrap-select 是一款基于JQuery的 下拉菜单 插件，支持搜索和多项选择功能，支持Booststrap。

点击这里进入Bootstrap-select中文官方网站

使用效果如下图所示：

                                        

---

 常用属性

初始化：

  Mustard
  Ketchup
  Relish

 

搜索功能，增加如下属性：

data-live-search =“true”

 

使用 data-max-options 限制选择的数量，使用 maxOptionsText 自定义达到限制时显示的消息：

  Mustard
  Ketchup
  Relish

 

使用title属性将在未选择任何内容时设置默认占位符文本 ：

  Mustard
  Ketchup
  Relish

 

在菜单顶部添加两个按钮 - 选择全部 、取消全部 ：data-actions-box =“true”。 

  Mustard
  Ketchup
  Relish

 

 指定列表中显示数据的数量：data-size = "5"

  ...

 

 在下拉菜单中添加标题， data-header="Select a condiment"

  ...

 

自定义宽度：

  

    

      
        Mustard
        Ketchup
        Relish
      
    
  

---

 常用方法

指定所选值：

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

指定所选的文本内容：

$("#Id option:selected").text();

 

第二种指定所选值的方法：

$('.selectpicker').val('Mustard');
$('.selectpicker').selectpicker('render');

 利用JS动态删除操作，需要操作后刷新：

$('.rm-mustard').click(function () {
  $('.remove-example').find('[value=Mustard]').remove();
  $('.remove-example').selectpicker('refresh');
});

强制重绘：

$('.selectpicker').selectpicker('refresh');
$('.selectpicker').selectpicker('render');