selectpicker 多选使用

最新推荐文章于 2024-01-22 10:08:20 发布

原创最新推荐文章于 2024-01-22 10:08:20 发布 · 7k 阅读

4 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍Bootstrap Select组件的使用方法，包括基本操作如单选、多选、模糊搜索、动态赋值等。通过具体实例，展示了如何引入必要的CSS和JS文件，生成下拉框选项，动态填充选项值，以及如何进行值的回填和获取已选项目。

附上官网api链接，http://silviomoreto.github.io/bootstrap-select/.

下拉框的使用上基本操作一般是：单选、多选、模糊搜索、动态赋值等，下面来看如何使用：

1.首先需要引入的CSS和JS

bootstrap.css
bootstrap-select.min.css
jquery-1.11.3.min.js
bootstrap.min.js
bootstrap-select.min.js

2. option在html中生成

html代码：

<select  multiple  class="form-control" name="dutylogtype[]" id="dutylogtype" data-live-search="true" value='{$dutylogconfig}' required>
	 <option value="voiceinfo">语音系统</option>
	 <option value="vedioinfo">视频系统</option>
	 <option value="businessinfo">业务网格系统</option>
	 <option value="otherinfo">其他</option>
</select>

设置multiple时为多选，data-live-search="true"时显示模糊搜索框，不设置或等于false时不显示。

JS代码：

//配置项
var  $dutylogconfig = '{$dutylogconfig}';
 $('select[name="dutylogtype[]"]').selectpicker({
     noneSelectedText: '请选择配置选项' //默认显示内容
 });

//value值回填，用split分隔字符串
 $('select[name="dutylogtype[]"]').selectpicker('val',$dutylogconfig.split(","));

3. 动态生成option

html代码：

<select multiple class="form-control"  name="dutyuserid" id="dutyuserid"  data-live-search="true"  required></select>

JS代码：

$('select[name="dutyuserid"]').selectpicker({
    noneSelectedText: '请选择人员...' //默认显示内容
});

//获取值班人员信息
function getUserId() {
    $.ajax({
        url: "__APP__/Mainten/Userinfoext/getListForCombobox",
        type:"get",
        dataType: 'json',
        async: false,
        success: function (data) {
            data.forEach(function(element){
                // alert(element.id);
                $('select[name="dutyuserid"]').append('<option value="'+element.id + '" >' + element.personname + '</option>');
            });
            // $('select[name="dutyuserid"]').selectpicker('refresh');
        }
    })
}

4.其他方法

获取已选的项：

var selectedValues = [];    
$("#dutyuserid:selected").each(function(){
    selectedValues.push($(this).val()); 
});

选择指定项（编辑回显使用）：

单选：$(’.selectpicker’).selectpicker(‘val’, ‘列表id’);

多选：var arr=str.split(’,’); $(’.selectpicker’).selectpicker(‘val’, arr);