bootstrap中selectpicker下拉框使用

温峻熙
2023-12-01

1、首先需要引用js
bootstrap.min.css
bootstrap-select.min.css
jquery.min.js
bootstrap.min.js
bootstrap-select.min.js

2、前端控件代码
<select class="selectpicker form-control" data-actions-box="true"
        data-size="15" data-style="btn-default" data-live-search="true"
        title="---请选择---" id="ddlFindsDept">
</select>

3、使用方法1
var deptLsthtml = "";
deptLsthtml += '<option value="-1">全部</option>';
deptLsthtml += '<option value="1">国内预订</option>';
deptLsthtml += '<option value="2">国际预订</option>';
deptLsthtml += '<option value="3">机票运营(上海)</option>';
deptLsthtml += '<option value="4">机票业务</option>';
deptLsthtml += '<option value="6">商旅</option>';
deptLsthtml += '<option value="5">其他</option>';
$("#ddlFindsDept").html(deptLsthtml);

使用方法2
$('#ddlFindsDept').selectpicker('val', ['1111','2222']);
 

4、禁止使用
$('#ddlFindsDept').selectpicker('setStyle', 'disabled', 'add'); 设置不可用
$('#ddlFindsDept').selectpicker('setStyle', 'disabled', 'remove');  设置可用
$('.selectpicker').selectpicker('setStyle', 'btn-danger');  替换css

5、刷新
$('.selectpicker').selectpicker('refresh');

6、多选
multiple

 
 类似资料: