Bootstrap-select（selectpicker）的使用说明

官网api链接：http://silviomoreto.github.io/bootstrap-select/

1、首先引入selectpicker插件js，css

<link href="~/Content/bootstrap-select.css" rel="stylesheet" /><script type="text/javascript" src="~/Scripts/bootstrap-select.js"></script>

由于：例子中用使用的是jquery语法和bootstrap前端框架，所以还要引入

<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" /><script type="text/javascript" src="~/Scripts/jquery-1.11.3.js"></script><script type="text/javascript" src="~/Scripts/bootstrap.js"></script>

注意：jQuery.js引入时要在其他js文件之前,否则js中无法识别jQuery语法

 

2、示例代码：

<select id="codeMechineHouse" multiple class="selectpicker"data-none-selected-text="全部"data-live-search-placeholder="搜索"data-live-search="true"data-none-Selected-Text="请选择">@foreach (var item in ViewBag.mechineNameLists){<option value="@item.SYSTEMID">@item.HOUSENAME</option>}</select>

 3、属性说明

selected ="selected"    option选中状态（全选则需在循环遍历时option时，加在该属性）

如：

 @foreach (var item in ViewBag.publishCodes)  { <option selected ="selected" value="@item.Type">@item.Name</option>  }

 

multiple:多选  （不加则为单选）

data-actions-box="true"：全选，false全不选

data-live-search="true"：查询

data-none-selected-text="全部"：未选中时显示

data-max-options="10"：最多可选条数

data-selected-text-format="count > 3"      显示选择项（多选的数量在三个以下，显示文本，大于三个显示：“选中{总数}的{选中数}项”）

如图：

 

 

//清空selectpicker 清空选择
$("#codeMechineHouse").val("").trigger("change")

 

//刷新selectpicker

$(".selectpicker").selectpicker("refresh");

 

//获取selectpicker的值(字符串输出，逗号分隔)

第一种：

function getSelectpickerValue() {var v = "";//直接对selectpicker插件val(),只能获取到一个对象数组var values = $("#codeMechineHouse").val();if (values != null && values.length > 0) {for (var i = 0; i < values.length; i++) {v += values[i] + ",";}}retu v;}

 第二种（简洁版）：

//格式如："2,3,4"$("#codeMechineHouse").val().toString(),

 

 

//获取selectpicker的文本(字符串输出，逗号分隔)

 function getSelectpickerText() {var v = "";var texts = $("#codeMechineHouse option:selected");for (var i = 0; i < texts.length; i++) {v += texts[i].innerText + ",";}}

 

 

 

//更简洁的获取值的写法：

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

 

 

 

第二种初始化方式：通过ajax获取到后台数据，回显加载selectpicker

 <select multiple class="selectpicker show-tick" style="outline: none;width:200px;" data-live-search="true" id="select_article" name="select_article"></select>

 

$('.selectpicker').selectpicker({noneSelectedText: '请选择',liveSearch: true,size:5//设置select高度，同时显示5个值});$(window).on('load', function () {var sid = $("#select_article").val();$('.selectpicker').selectpicker('val', '');$('.selectpicker').selectpicker('refresh');$.ajax({method:'POST',url:'/Slider/GetOptionData',dataType:'json',success: function (res) {var html="";console.log(res);for (var i = 0; i < res.content.length; i++) {//selected='selected'  勾选选择项html += "<option  value='" + res.content[i].tid + "' selected='selected' data-name='"+res.content[i].name+"'>" + res.content[i].name + "</option>";}$("#select_article").html(html);$('.selectpicker').selectpicker('refresh');//加载select框选择器}});});

效果图：

 

第三种回显的方式：

 //将类似于"9,10,11"的字符串转换为["9","10","13"]这样的数组，回显勾选上原来的选择项
$("#add_senType").selectpicker('val', data.sentype.split(","));

 

 

 

 

 

 效果图：

 

选择改变事件：

$('#select_article').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {if (isSelected == null) {//控件初始化，页面加载，不属于用户操作，不提示retu;}alert("用户修改了项！");});

 

 

如图：