Bootstrap selectpicker-CSDN博客

本文详细介绍了如何使用Bootstrap Selectpicker组件实现单选和多选功能。通过具体的代码示例展示了如何初始化Selectpicker、数据渲染、编辑时的数据回显以及如何获取选中的值等关键操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap selectpicker自定义下拉选

单选和多选的区别在html中属性multiple

单选

下面展示一些 内联代码片。

<select id="usertype" name="usertype"
	class="selectpicker show-tick form-control"
	data-live-search="false">
	<option value="">请选择</option>
</select>

// 数据渲染
for (var i = 0; i < me.classlist.length; i++) {
	$(".selectpicker").append("<option value='" + me.classlist[i].ID  + "'>"  + me.classlist[i].NAME + "</option>");
}
// 初始化
$('#usertype').selectpicker({
	'selectedText': 'cat',
    'actionsBox' : true,
    'liveSearch' : true,
    'showIcon' : true,
    'noneSelectedText': '请选择',
  	'deselectAllText':'全不选',
    'selectAllText': '全选'
});
// 编辑时数据回显，在初始化后以下代码可回显
var arr = [];
arr.push(parseInt(ID))
$('#usertype').selectpicker('val',arr);
// 获取选中的值
var ID = $('[id="usertype"]').val();

多选

<select id="usertype" name="usertype"
	class="selectpicker show-tick form-control" multiple data-live-search="false">
</select>

// 数据渲染
for (var i = 0; i < me.classlist.length; i++) {
       $(".selectpicker").append("<option value='" + me.classlist[i].ID  + "'>"  + me.classlist[i].NAME + "</option>");
}
// 初始化
$('#usertype').selectpicker({
     'selectedText': 'cat',
     'actionsBox' : true,
     'liveSearch' : true,
     'showIcon' : true,
     'noneSelectedText': '请选择',
     'deselectAllText':'全不选',
     'selectAllText': '全选'
 });
// 编辑回显
var arr = [];
for (var i = 0; i < LIST.length; i++) {
	arr.push(parseInt(par.LIST[i].ID))
}
$('#usertype').selectpicker('val',arr);
 // 获取值，返回一个数组
 $('[id="usertype"]').val();