Bootstrap-select（selectpicker）的使⽤说明
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语法
为什么使用bootstrap?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 hineNameLists)
{
<option value="@item.SYSTEMID">@item.HOUSENAME</option>
}
</select>
View Code
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] + ",";
}
}
return 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" 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 < t.length; i++) {
//selected='selected'  勾选选择项
html += "<option  value='" + t[i].tid + "' selected='selected' data-name='"+t[i].name+"'>" + t[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) {
//控件初始化，页⾯加载，不属于⽤户操作，不提⽰
return;
}
alert("⽤户修改了项！");
});
如图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。