附上官网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);