前端插件之 bootstrap-select API 介绍及使用

最新推荐文章于 2021-12-24 15:43:00 发布

smile radiantly

最新推荐文章于 2021-12-24 15:43:00 发布

阅读量3.3k

点赞数

分类专栏：前端插件文章标签： jquery

原文链接：https://juejin.im/post/5b9b55215188255c352d49cb

版权

前端插件专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.组件开源地址以及API说明

2.使用前提

引入bootstrap-select,既然是bootstrap-select，组件肯定是依赖bootstrap的，而bootstrap又是依赖jquery的，所以使用组件必须引用如下文件。

<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="/css/bootstrap.min.css" >
<link rel="stylesheet" href="/css/bootstrap-select.min.css" >
<script src="/js/bootstrap.min.js" ></script>
<script src="/js/bootstrap-select.min.js" ></script>
<script src="js/i18n/defaults-zh_CN.min.js"></script> <!-- defaults-zh_CN.min.js 非必需-->

3.select使用

3.1单选

<!--基本使用-->
<select class="selectpicker">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

<!--分组单选-->
<select class="selectpicker">
  <optgroup label="Picnic">
	 <option>Mustard</option>
	 <option>Ketchup</option>
	 <option>Relish</option>
 </optgroup>
 <optgroup label="Camping">
	 <option>Tent</option>
	 <option>Flashlight</option>
	 <option>Toilet Paper</option>
 </optgroup>
</select>

3.2多选框

相比于单选框加入了一个multiple标签。

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

3.3模糊查询

添加一个data-live-search="true"的属性。

<select class="selectpicker" data-live-search="true">
  <option>Hot Dog</option>
  <option>Fries</option>
  <option>Soda</option>
  <option>Burger</option>
  <option>Shake</option>
  <option>Smile</option>
</select>

3.4多选限制

添加属性data-max-options="2"或者在初始化时用maxOptionsText做限制。

<select class="selectpicker" multiple data-max-options="2">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

或者在初始化selectpicker时设置maxOptionsText

$('.selectpicker').selectpicker({
   'selectedText':'cat',
   'maxOptionsText':2;
})

3.5自定义按钮文本

通过属性title来控制。

选择框文本

<select class="selectpicker" multiple title="请选择一个">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

选择显示单条文本意思就是选中相应的option，就展示option的title，比如选中"Burger, Shake and a Smile",文本框内显示Combo 2。

<select class="selectpicker">
  <option title="Combo 1">Hot Dog, Fries and a Soda</option>
  <option title="Combo 2">Burger, Shake and a Smile</option>
  <option title="Combo 3">Sugar, Spice and all things nice</option>
</select>

3.6多选框格式化选择文本

通过属性 data-selected-text-format 来控制选中的值的显示可选的值有如下4个：

values：逗号分隔的选定值列表（系统默认）；
count：如果选择了一个项，则显示选项值。如果选择多于一个，则显示所选项的数量,如选择2个，则下拉框显示2个已被选中；
count > x：当count的值小于x时，展示逗号分隔的选定值列表;当count>x时，显示x个被选中；
static：无论选中什么，都只展示默认的选中文本。
下面给几个简单示例：

<select class="selectpicker" multiple data-selected-text-format="count">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>

<select class="selectpicker" multiple data-selected-text-format="count>3">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
  <option>Onions</option>
</select>

3.6样式选择

按钮样式通过data-style来设置按钮的样式

<select class="selectpicker" data-style="btn-primary">
  ...
</select>

<select class="selectpicker" data-style="btn-info">
  ...
</select>

<select class="selectpicker" data-style="btn-success">
  ...
</select>

<select class="selectpicker" data-style="btn-warning">
  ...
</select>

<select class="selectpicker" data-style="btn-danger">
  ...
</select>

单选框样式这里要注意一下，单选框默认是没有多选框的选中之后的"√"图标的，如果想要加上这个图标的话，需要在样式中加入show-tick即可

<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

style样式自定义 bootstrap-select的样式不是死的，可以自定义style样式，类似最基本的css样式添加。

.special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>

宽度
引用bootstrap的样式

<div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="selectpicker form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>

使用data-width属性，来定义宽度，可选的值有以下4个
auto：select的宽度由option中内容宽度最宽的哪个决定；
fit：select的宽度由实际选中的option的宽度决定；
100px：select的宽度定义为100px；
50%：select的宽度设置为父容器宽度的50%

<select class="selectpicker" data-width="auto">
   <option>cow</option>
    <option>bullaaaaaaaaaaaa</option>
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="fit">
  <option>cow</option>
    <option>bullaaaaaaaaaaaa</option>
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="100px">
  <option>cow</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
</select>
<select class="selectpicker" data-width="50%">
    <option>cow</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
</select>

3.7自定义option

添加图标用data-icon给option添加小图标，实现比较炫酷的效果。如果想要获取更多样式可参考bootstrap官网的图标库，给个网址 www.runoob.com/bootstrap/b…

 <select class="selectpicker">
  <option data-icon="glyphicon-heart">Ketchup</option>
  <option data-icon="glyphicon glyphicon-th-large">Mustard</option>
  <option data-icon="glyphicon glyphicon-home">Relish</option>
</select>

插入HTML 用data-content可以在option中插入html元素,实现想要的效果

<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

插入二级标题用data-subtext实现二级标题，实现提示或者其他效果，如果要在select中也展示二级标题,要在初始化selectpicker时要设置showSubtext为true

<select class="selectpicker" data-size="5">
    <option data-subtext="Heinz">Ketchup</option>
    <option data-subtext="ble">Mustard</option>    
    <option data-subtext="com">Relish</option>
</select>

3.8自定义下拉菜单

1.菜单显示项大小通过data-size属性来限制菜单显示的条数，比如说option有8条，我们只展示5条,其余的通过滚动条显示。

<select class="selectpicker" data-size="5">
    <option>apple</option>
    <option>banana</option>
    <option>group</option>
    <option>orange</option>
    <option>cherry</option>
    <option>mango</option>
    <option>pineapple</option>
    <option>lychee</option>
</select>

2.全选和全不选通过设置data-actions-box="true"来添加全选和全不选的按钮。

<select class="selectpicker" multiple data-actions-box="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
// 或
$('.selectpicker').selectpicker({
   'selectedText':'cat',
    'noneSelectedText':'请选择',
    'deselectAllText':'全不选',
    'selectAllText': '全选',
})

3.添加数据分割线设置data-divider="true"添加数据分割线。

<select class="selectpicker" data-size="5">
  <option>Mustrad</option>
  <option >Ketchup</option>
  <option >Relish</option>
  <option data-divider="true"></option>
   <option>Mustrad</option>
  <option >Ketchup</option>
  <option >Relish</option>
</select>

4.添加菜单头用data-header为下拉菜单设置菜单头。

<select class="selectpicker" data-header="Select a condiment">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

5.设置菜单的上浮或者下浮通过设置dropupAuto来设置菜单的上下浮动，dropupAuto默认为true，自动确定是否应显示的菜单上面或下面的选择框，如果设置为false，系统会加入一个dropup样式的上拉框。

 $('.selectpicker').selectpicker({
                'selectedText':'cat',                   
                 'dropupAuto':false
             })

<select class="selectpicker dropup">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

3.9不可用

在对应的控件上加入disabled即可实现。
1.设置select不可用。这里select按钮失效，不能点击

<select class="selectpicker" disabled>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

2.设置option不可用这里option设置属性为disabled的将无法选中

<select class="selectpicker">
  <option>Mustard</option>
  <option disabled>Ketchup</option>
  <option>Relish</option>
</select>

3.设置optiongroup不可用这里是一个optiongroup将无法选中

<select class="selectpicker test">
  <optgroup label="Picnic" disabled>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>

bootstrap-select的使用

组件的取值与赋值

(1)取值

var value = $('#sel').val(); #sel为select标签的id值

需要注意的是，如果是多选，这里得到的value变量是一个数组变量。

(2)赋值

//单选赋值
$('.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");

(3)组件其他用法

//全选：
 $('.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');

动态加option

ajax的数据refresh和清除

$('.selectpicker').selectpicker('val', '');  
$('.selectpicker').selectpicker('refresh');   
//selected 选择后数据的获取
var category = $.trim($('#slpk option:selected').val());

动态示例：

//下拉数据加载  
$.ajax({  
    type : 'get',  
    url : "${pageContext.request.contextPath}/category/findCategory",  
    dataType : 'json',      
    success : function(datas) {//返回list数据并循环获取  
        var select = $("#slpk");
        for (var i = 0; i < datas.rows.length; i++) { 
        	select.append("<option value='"+datas.rows[i].name+"'>"  
                    + datas.rows[i].name + "</option>");  
        }  
        $('.selectpicker').selectpicker('val', '');  
        $('.selectpicker').selectpicker('refresh');   
    } 
    
});

参考链接

smile radiantly

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
前端插件之 bootstrap-select API 介绍及使用

1.组件开源地址以及API说明bootstrap-selectbootstrap-select Examples2.使用前提引入bootstrap-select,既然是bootstrap-select，组件肯定是依赖bootstrap的，而bootstrap又是依赖jquery的，所以使用组件必须引用如下文件。<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script><link r
复制链接

扫一扫